| """Local test server for Quill.
|
|
|
| python server.py -> http://127.0.0.1:8792
|
| """
|
| import json
|
| import os
|
| import sys
|
| from http.server import BaseHTTPRequestHandler, ThreadingHTTPServer
|
| from urllib.parse import urlparse
|
|
|
| from api import render_query
|
| from quill import INKS, STYLES
|
|
|
| PORT = int(os.environ.get("PORT") or (sys.argv[1] if len(sys.argv) > 1 else 8792))
|
| HOST = "0.0.0.0" if "PORT" in os.environ else "127.0.0.1"
|
|
|
| PAGE = """<!doctype html>
|
| <html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
| <title>Quill</title>
|
| <style>
|
| :root { --bg:#f6f5f1; --fg:#1d1d1f; --muted:#6b6b70; --card:#fff; --line:#dcdad4; --accent:#7a3b1e; }
|
| @media (prefers-color-scheme: dark) { :root { --bg:#16161a; --fg:#ececf0; --muted:#9a9aa3; --card:#202026; --line:#33333b; --accent:#d08a5c; } }
|
| body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.5 system-ui, sans-serif; }
|
| main { max-width:1000px; margin:0 auto; padding:24px 16px 48px; }
|
| h1 { font-size:22px; margin:0 0 4px; } .sub { color:var(--muted); margin:0 0 16px; }
|
| textarea, select { padding:10px 12px; font:inherit; border:1px solid var(--line); border-radius:8px;
|
| background:var(--card); color:var(--fg); }
|
| textarea { width:100%; box-sizing:border-box; min-height:84px; resize:vertical; }
|
| .controls { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:10px 0 0; }
|
| label { display:flex; gap:6px; align-items:center; color:var(--muted); }
|
| button { padding:10px 18px; font:inherit; border:0; border-radius:8px; background:var(--accent); color:#fff; cursor:pointer; }
|
| button.ghost { background:var(--card); color:var(--fg); border:1px solid var(--line); }
|
| button:disabled { opacity:.5; cursor:wait; }
|
| .chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
|
| .chip { padding:4px 10px; border:1px solid var(--line); border-radius:999px; background:var(--card); cursor:pointer; font-size:13px; }
|
| #out { margin-top:20px; display:grid; gap:16px; }
|
| figure { margin:0; } figure img { max-width:100%; display:block; border-radius:10px; border:1px solid var(--line); }
|
| figcaption { color:var(--muted); font-size:13px; margin-top:4px; display:flex; gap:12px; }
|
| figcaption a { color:var(--accent); }
|
| #status { color:var(--muted); margin-top:12px; min-height:1.5em; }
|
| </style></head><body><main>
|
| <h1>Quill</h1>
|
| <p class="sub">Calligraphy with hand-set pens over public stroke data (Hershey letters, KanjiVG kanji and kana). No training. Kanji or kana switch to the shodo brush automatically.</p>
|
| <textarea id="t">Ars longa, vita brevis</textarea>
|
| <div class="controls">
|
| <label>Style <select id="style">__STYLES__</select></label>
|
| <label>Ink <select id="ink"><option value="">style default</option>__INKS__</select></label>
|
| <label>Size <input id="size" type="range" min="32" max="140" value="72"><span id="sv">72</span>px</label>
|
| <label><input id="fl" type="checkbox"> Flourish</label>
|
| <label><input id="ini" type="checkbox"> Red initial</label>
|
| <label>Seal <input id="seal" maxlength="4" size="4" placeholder="和 / VK"></label>
|
| <label><input id="anim" type="checkbox"> Animate</label>
|
| <button id="go">Write</button>
|
| <button id="all" class="ghost">All styles</button>
|
| </div>
|
| <div class="chips" id="chips"></div>
|
| <div id="status"></div>
|
| <div id="out"></div>
|
| </main><script>
|
| const $ = id => document.getElementById(id);
|
| const demos = ["Ars longa, vita brevis", "Happy Birthday\\nwith love from all of us", "Here beginneth the tale",
|
| "With kind regards", "Quiet rain on the lake", "一期一会\\n花鳥風月", "永", "夢", "ありがとう"];
|
| demos.forEach(d => { const c = document.createElement('span'); c.className = 'chip'; c.textContent = d.replace('\\n', ' / ');
|
| c.onclick = () => { $('t').value = d; write([$('style').value]); }; $('chips').appendChild(c); });
|
| $('size').oninput = () => $('sv').textContent = $('size').value;
|
| async function write(styles) {
|
| $('go').disabled = $('all').disabled = true; $('out').innerHTML = '';
|
| for (const s of styles) {
|
| $('status').textContent = 'Writing ' + s + '…';
|
| const q = new URLSearchParams({ text: $('t').value, style: s, ink: $('ink').value, size: $('size').value,
|
| flourish: $('fl').checked ? '1' : '', initial: $('ini').checked ? '1' : '',
|
| seal: $('seal').value, animate: $('anim').checked ? '1' : '' });
|
| const t0 = performance.now();
|
| const r = await fetch('/render?' + q);
|
| const j = await r.json();
|
| if (!r.ok) { $('status').textContent = j.error; break; }
|
| const f = document.createElement('figure');
|
| f.innerHTML = '<img alt=""><figcaption><span></span><a download>Download PNG</a></figcaption>';
|
| f.querySelector('img').src = f.querySelector('a').href = j.src;
|
| const ext = j.src.slice(11, j.src.indexOf(';'));
|
| f.querySelector('a').download = 'quill_' + s + '.' + ext;
|
| f.querySelector('a').textContent = ext === 'png' ? 'Download PNG' : 'Download animation';
|
| f.querySelector('span').textContent = (j.style || s) + ' · ' + ((performance.now() - t0) / 1000).toFixed(1) + ' s';
|
| $('out').appendChild(f);
|
| }
|
| $('status').textContent = ''; $('go').disabled = $('all').disabled = false;
|
| }
|
| $('go').onclick = () => write([$('style').value]);
|
| $('all').onclick = () => write(/[\\u3040-\\u9fff]/.test($('t').value) ? ['shodo'] : __ALL__.filter(s => s !== 'shodo'));
|
| write([$('style').value]);
|
| </script></body></html>"""
|
|
|
|
|
| def page():
|
| opts = lambda xs: "".join(f'<option value="{x}">{x}</option>' for x in xs)
|
| return (PAGE.replace("__STYLES__", opts(STYLES)).replace("__INKS__", opts(INKS))
|
| .replace("__ALL__", json.dumps(list(STYLES))))
|
|
|
|
|
| class Handler(BaseHTTPRequestHandler):
|
| protocol_version = "HTTP/1.1"
|
|
|
| def send(self, body, ctype, code=200):
|
| self.send_response(code)
|
| self.send_header("Content-Type", ctype)
|
| self.send_header("Content-Length", str(len(body)))
|
| self.send_header("Cache-Control", "no-store")
|
| self.end_headers()
|
| self.wfile.write(body)
|
|
|
| def do_GET(self):
|
| url = urlparse(self.path)
|
| if url.path == "/":
|
| self.send(page().encode(), "text/html; charset=utf-8")
|
| elif url.path == "/render":
|
| code, body = render_query(url.query)
|
| self.send(json.dumps(body).encode(), "application/json", code)
|
| else:
|
| self.send(b"not found", "text/plain", 404)
|
|
|
| def log_message(self, *a):
|
| pass
|
|
|
|
|
| if __name__ == "__main__":
|
| print(f"Quill on http://{HOST}:{PORT}", flush=True)
|
| ThreadingHTTPServer((HOST, PORT), Handler).serve_forever()
|
|
|
