Hugging Face's logo

Spaces:
lanczos
/
aesthetic-annotators
Sleeping

App Files Community
lanczos commited on
Commit
62a142e
·
verified ·
1 Parent(s): 871ff87

deploy: labeling server

Browse files
Files changed (3) hide show
  1. labeling/static/app.js +21 -0
  2. labeling/static/index.html +13 -3
  3. labeling/static/style.css +37 -1
labeling/static/app.js CHANGED
@@ -2,6 +2,26 @@
2
 
3
  const AXES = ["art_style", "color", "art_medium", "lighting"];
4
  const TOKEN_STORAGE_KEY = "aamcq_token";
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5
 
6
  async function fetchJSON(path, init) {
7
  const resp = await fetch(path, init);
@@ -140,6 +160,7 @@ async function submitLabel(token) {
140
  }
141
 
142
  async function main() {
 
143
  let token;
144
  try {
145
  token = await ensureToken();
 
2
 
3
  const AXES = ["art_style", "color", "art_medium", "lighting"];
4
  const TOKEN_STORAGE_KEY = "aamcq_token";
5
+ const THEME_STORAGE_KEY = "aamcq_theme";
6
+
7
+ function setTheme(theme) {
8
+ document.documentElement.setAttribute("data-theme", theme);
9
+ localStorage.setItem(THEME_STORAGE_KEY, theme);
10
+ const btn = document.getElementById("theme-toggle");
11
+ if (btn) btn.textContent = theme === "dark" ? "☾" : "☀";
12
+ }
13
+
14
+ function initThemeToggle() {
15
+ const current = localStorage.getItem(THEME_STORAGE_KEY) || "light";
16
+ setTheme(current);
17
+ const btn = document.getElementById("theme-toggle");
18
+ btn.addEventListener("click", () => {
19
+ const now = document.documentElement.getAttribute("data-theme") === "dark"
20
+ ? "light"
21
+ : "dark";
22
+ setTheme(now);
23
+ });
24
+ }
25
 
26
  async function fetchJSON(path, init) {
27
  const resp = await fetch(path, init);
 
160
  }
161
 
162
  async function main() {
163
+ initThemeToggle();
164
  let token;
165
  try {
166
  token = await ensureToken();
labeling/static/index.html CHANGED
@@ -4,13 +4,23 @@
4
  <meta charset="utf-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
  <title>AestheticMCQ — Annotation</title>
7
- <link rel="stylesheet" href="/style.css?v=4" />
 
 
 
 
 
 
 
8
  </head>
9
  <body>
10
  <main>
11
  <header>
12
  <h1>AestheticMCQ</h1>
13
- <div id="progress">loading…</div>
 
 
 
14
  </header>
15
  <section id="instructions">
16
  <p>
@@ -31,6 +41,6 @@
31
  <span id="error"></span>
32
  </footer>
33
  </main>
34
- <script src="/app.js?v=5"></script>
35
  </body>
36
  </html>
 
4
  <meta charset="utf-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
  <title>AestheticMCQ — Annotation</title>
7
+ <link rel="stylesheet" href="/style.css?v=7" />
8
+ <script>
9
+ // Apply saved theme before CSS paints to avoid a flash.
10
+ (function () {
11
+ var t = localStorage.getItem("aamcq_theme") || "light";
12
+ document.documentElement.setAttribute("data-theme", t);
13
+ })();
14
+ </script>
15
  </head>
16
  <body>
17
  <main>
18
  <header>
19
  <h1>AestheticMCQ</h1>
20
+ <div class="right">
21
+ <div id="progress">loading…</div>
22
+ <button id="theme-toggle" aria-label="toggle theme" title="toggle light/dark">☀</button>
23
+ </div>
24
  </header>
25
  <section id="instructions">
26
  <p>
 
41
  <span id="error"></span>
42
  </footer>
43
  </main>
44
+ <script src="/app.js?v=7"></script>
45
  </body>
46
  </html>
labeling/static/style.css CHANGED
@@ -1,4 +1,5 @@
1
- :root {
 
2
  --bg: #111;
3
  --fg: #eee;
4
  --muted: #888;
@@ -7,6 +8,17 @@
7
  --border: #2a2a2a;
8
  }
9
 
 
 
 
 
 
 
 
 
 
 
 
10
  * { box-sizing: border-box; }
11
 
12
  body {
@@ -36,6 +48,30 @@ header h1 { font-size: 1.2rem; margin: 0; }
36
 
37
  #progress { color: var(--muted); font-size: 0.9rem; }
38
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
39
  #instructions p {
40
  color: var(--muted);
41
  font-size: 0.9rem;
 
1
+ :root,
2
+ :root[data-theme="dark"] {
3
  --bg: #111;
4
  --fg: #eee;
5
  --muted: #888;
 
8
  --border: #2a2a2a;
9
  }
10
 
11
+ :root[data-theme="light"] {
12
+ --bg: #f6f6f7;
13
+ --fg: #1a1a1c;
14
+ --muted: #666;
15
+ --accent: #1e6fe0;
16
+ --card: #ffffff;
17
+ --border: #dcdee0;
18
+ }
19
+
20
+ html { color-scheme: light dark; }
21
+
22
  * { box-sizing: border-box; }
23
 
24
  body {
 
48
 
49
  #progress { color: var(--muted); font-size: 0.9rem; }
50
 
51
+ #theme-toggle {
52
+ background: transparent;
53
+ border: 1px solid var(--border);
54
+ color: var(--fg);
55
+ width: 32px;
56
+ height: 32px;
57
+ border-radius: 50%;
58
+ cursor: pointer;
59
+ font-size: 16px;
60
+ line-height: 1;
61
+ margin-left: 12px;
62
+ padding: 0;
63
+ display: inline-flex;
64
+ align-items: center;
65
+ justify-content: center;
66
+ transition: background 0.15s;
67
+ }
68
+ #theme-toggle:hover { background: var(--card); }
69
+
70
+ header > .right {
71
+ display: flex;
72
+ align-items: center;
73
+ }
74
+
75
  #instructions p {
76
  color: var(--muted);
77
  font-size: 0.9rem;