UniEmoji/config.html at main · hellodigua/UniEmoji · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>UniEmoji 素材标注</title>
    <link rel="stylesheet" href="assets/config-style.css" />
  </head>
  <body>
    <div class="container">
      <h1>UniEmoji 素材标注</h1>

      <div class="instructions">
        <p>
          给现有平台素材命名和打标签，方便以后做成
          <code>uniemoji-core@1</code>
          表情包。这不是协议本身，只是素材库的辅助工具。
        </p>
        <h2>双轴标签说明</h2>
        <p>
          <strong>情感轴</strong>：表情传递的核心情绪色彩 -
          positive(积极)、negative(消极)、neutral(中性)
        </p>
        <p>
          <strong>文案风格轴</strong>：表情的文案表达风格 -
          supportive(鼓励安慰)、sarcastic(阴阳怪气)、humorous(幽默)、surreal(抽象)、playful(俏皮)、plain(通用)
        </p>
        <p style="color: #718096; font-size: 14px">
          💡 每个轴都可以多选，一个表情可以同时具有多种情感色彩和文案风格
        </p>
      </div>

      <div class="cache-info" id="cache-info">💾 加载缓存状态中...</div>
      <div class="cache-actions">
        <button id="load-from-json-btn">从JSON重新加载</button>
        <button id="clear-cache-btn" class="clear-cache-btn">
          清除所有缓存
        </button>
      </div>

      <div id="tagging-root"></div>

      <div id="output-area">
        <h2><strong>最后一步</strong>：生成并下载带有标签的JSON</h2>
        <button id="generate-btn">生成并下载 tagged_emoji.json</button>
        <p style="margin-top: 1rem">最终生成的JSON预览：</p>
        <textarea id="output-json" readonly></textarea>
      </div>
    </div>

    <script>
      // --- 1. 定义所需变量和预设标签 ---
      const taggingRoot = document.getElementById("tagging-root");
      const generateBtn = document.getElementById("generate-btn");
      const outputJsonTextarea = document.getElementById("output-json");

      const tagCategories = {
        sentiment: {
          title: "情感轴",
          description: "表情传递的核心情绪色彩",
          tags: [
            { value: "positive", label: "积极" },
            { value: "negative", label: "消极" },
            { value: "neutral", label: "中性" },
          ],
        },
        style: {
          title: "文案风格轴",
          description: "表情的文案表达风格",
          tags: [
            { value: "supportive", label: "鼓励安慰" },
            { value: "sarcastic", label: "阴阳怪气" },
            { value: "humorous", label: "幽默" },
            { value: "surreal", label: "抽象" },
            { value: "playful", label: "俏皮" },
            { value: "plain", label: "通用" },
          ],
        },
      };

      let emojiData = [];

      // --- 缓存管理函数 ---
      const CACHE_KEY = "emoji_config_cache";

      function saveToCache() {
        try {
          localStorage.setItem(CACHE_KEY, JSON.stringify(emojiData));
          updateCacheStatus();
        } catch (error) {
          console.error("保存缓存失败:", error);
        }
      }

      function loadFromCache() {
        try {
          const cached = localStorage.getItem(CACHE_KEY);
          return cached ? JSON.parse(cached) : null;
        } catch (error) {
          console.error("加载缓存失败:", error);
          return null;
        }
      }

      function clearCache() {
        localStorage.removeItem(CACHE_KEY);
        updateCacheStatus();
      }

      function updateCacheStatus() {
        const cacheInfo = document.getElementById("cache-info");
        const cached = loadFromCache();
        if (cached && cacheInfo) {
          let totalEmojis = 0;
          let taggedEmojis = 0;
          cached.forEach((platform) => {
            platform.emojis.forEach((emoji) => {
              totalEmojis++;
              if (emoji.name || emoji.tags.length > 0 || (emoji.keywords && emoji.keywords.length > 0)) {
                taggedEmojis++;
              }
            });
          });
          cacheInfo.textContent = `💾 已缓存进度：${taggedEmojis}/${totalEmojis} 个表情已标注`;
        } else if (cacheInfo) {
          cacheInfo.textContent = "💾 暂无缓存数据";
        }
      }

      // --- 2. 页面加载时自动获取和渲染数据 ---
      document.addEventListener("DOMContentLoaded", async () => {
        try {
          // 优先从缓存加载数据
          const cachedData = loadFromCache();

          if (cachedData) {
            emojiData = cachedData;
            renderTaggerUI();
            updateCacheStatus();
            console.log("从缓存加载数据成功");
          } else {
            // 缓存无数据时从json文件加载
            const response = await fetch("emoji.json");
            if (!response.ok) {
              throw new Error(
                `HTTP error! status: ${response.status}. 请确保 emoji.json 文件与此html在同一目录下，并且您正在使用本地服务器访问。`
              );
            }
            emojiData = await response.json();
            renderTaggerUI();
            updateCacheStatus();
            console.log("从JSON文件加载数据成功");
          }
        } catch (err) {
          taggingRoot.innerHTML = `<p style="color: red;"><strong>加载失败：</strong>${err.message}</p>`;
          console.error(err);
        }
      });

      // --- 3. 渲染UI界面的函数 (与之前版本相同) ---
      function renderTaggerUI() {
        emojiData.forEach((platformData, platformIndex) => {
          const section = document.createElement("div");
          section.className = "platform-section";

          const title = document.createElement("h2");
          title.textContent = `平台：${platformData.platform}`;
          section.appendChild(title);

          const grid = document.createElement("div");
          grid.className = "emoji-grid";

          platformData.emojis.forEach((emoji, emojiIndex) => {
            const card = document.createElement("div");
            card.className = "emoji-card";
            const preview = document.createElement("div");
            preview.className = "emoji-preview";
            const img = document.createElement("img");
            img.src = emoji.url;
            img.alt = emoji.name || emoji.description || emoji.url;

            const descContainer = document.createElement("div");
            descContainer.className = "desc-container";
            const descLabel = document.createElement("label");
            descLabel.textContent = "名称";
            descLabel.className = "desc-label";
            const descInput = document.createElement("input");
            descInput.type = "text";
            descInput.value = emoji.name || emoji.description || "";
            descInput.className = "desc-input";
            descInput.oninput = (e) => {
              // 统一使用name字段，移除description字段
              emojiData[platformIndex].emojis[emojiIndex].name = e.target.value;
              // 如果存在description字段，删除它
              if (
                emojiData[platformIndex].emojis[emojiIndex].hasOwnProperty(
                  "description"
                )
              ) {
                delete emojiData[platformIndex].emojis[emojiIndex].description;
              }
              updateJsonPreview();
              saveToCache();
            };
            descContainer.appendChild(descLabel);
            descContainer.appendChild(descInput);

            preview.appendChild(img);
            preview.appendChild(descContainer);

            // Keywords编辑区域 (独立的card级别组件)
            const keywordsContainer = document.createElement("div");
            keywordsContainer.className = "keywords-container";
            const keywordsLabel = document.createElement("label");
            keywordsLabel.textContent = "关键词 (Keywords)";
            keywordsLabel.className = "keywords-label";
            keywordsContainer.appendChild(keywordsLabel);

            const keywordsInput = document.createElement("input");
            keywordsInput.type = "text";
            keywordsInput.placeholder = "输入关键词，用英文逗号分隔";
            keywordsInput.className = "keywords-input";

            // 初始化keywords数组
            if (!emoji.keywords) {
              emojiData[platformIndex].emojis[emojiIndex].keywords = [];
            }

            // 显示现有keywords (数组转换为逗号分隔字符串)
            const keywordsArray = emojiData[platformIndex].emojis[emojiIndex].keywords || [];
            keywordsInput.value = keywordsArray.join(',');

            // 输入变化时更新数据
            keywordsInput.oninput = (e) => {
              const keywordsText = e.target.value;
              // 解析逗号分隔字符串为数组，去除空白和重复
              const keywords = keywordsText
                .split(',')
                .map(k => k.trim())
                .filter((k, index, arr) => k && arr.indexOf(k) === index);

              emojiData[platformIndex].emojis[emojiIndex].keywords = keywords;
              updateJsonPreview();
              saveToCache();
            };

            keywordsContainer.appendChild(keywordsInput);

            const tagsGroup = document.createElement("div");
            tagsGroup.className = "form-group";
            const tagsLabel = document.createElement("label");
            tagsLabel.textContent = "标签分类 (Tag Categories)";
            tagsGroup.appendChild(tagsLabel);

            Object.entries(tagCategories).forEach(([categoryKey, category]) => {
              const categoryDiv = document.createElement("div");
              categoryDiv.className = "tag-category";

              const categoryHeader = document.createElement("div");
              categoryHeader.className = "tag-category-header";

              const categoryTitle = document.createElement("div");
              categoryTitle.className = "tag-category-title";
              categoryTitle.textContent = category.title;

              const categoryDesc = document.createElement("div");
              categoryDesc.className = "tag-category-desc";
              categoryDesc.textContent = category.description;

              categoryHeader.appendChild(categoryTitle);
              categoryHeader.appendChild(categoryDesc);

              const tagsContainer = document.createElement("div");
              tagsContainer.className = "tag-group";

              category.tags.forEach((tag) => {
                const label = document.createElement("label");
                const checkbox = document.createElement("input");
                checkbox.type = "checkbox";
                checkbox.value = tag.value;
                if (emoji.tags.includes(tag.value)) {
                  checkbox.checked = true;
                }
                checkbox.onchange = (e) => {
                  const currentTags = new Set(
                    emojiData[platformIndex].emojis[emojiIndex].tags
                  );
                  if (e.target.checked) {
                    currentTags.add(tag.value);
                  } else {
                    currentTags.delete(tag.value);
                  }
                  emojiData[platformIndex].emojis[emojiIndex].tags =
                    Array.from(currentTags);
                  updateJsonPreview();
                  saveToCache();
                };
                label.appendChild(checkbox);
                label.append(tag.label);
                tagsContainer.appendChild(label);
              });

              categoryDiv.appendChild(categoryHeader);
              categoryDiv.appendChild(tagsContainer);
              tagsGroup.appendChild(categoryDiv);
            });

            card.appendChild(preview);
            card.appendChild(keywordsContainer);
            card.appendChild(tagsGroup);
            grid.appendChild(card);
          });

          section.appendChild(grid);
          taggingRoot.appendChild(section);
        });

        updateJsonPreview();
      }

      // --- 4. 更新预览和生成下载 (与之前版本相同) ---
      function updateJsonPreview() {
        outputJsonTextarea.value = JSON.stringify(emojiData, null, 2);
      }

      generateBtn.addEventListener("click", () => {
        if (emojiData.length === 0) {
          alert("数据未加载，无法生成！");
          return;
        }
        const jsonString = JSON.stringify(emojiData, null, 2);
        const blob = new Blob([jsonString], { type: "application/json" });
        const url = URL.createObjectURL(blob);

        const link = document.createElement("a");
        link.href = url;
        link.download = "tagged_emoji.json";

        document.body.appendChild(link);
        link.click();

        document.body.removeChild(link);
        URL.revokeObjectURL(url);
      });

      // --- 缓存管理按钮事件 ---
      document
        .getElementById("load-from-json-btn")
        .addEventListener("click", async () => {
          if (
            confirm("确定要从JSON文件重新加载数据吗？这将覆盖当前的缓存数据。")
          ) {
            try {
              const response = await fetch("emoji.json");
              if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
              }
              emojiData = await response.json();
              saveToCache();
              taggingRoot.innerHTML = "";
              renderTaggerUI();
              updateCacheStatus();
            } catch (error) {
              alert("加载失败：" + error.message);
            }
          }
        });

      document
        .getElementById("clear-cache-btn")
        .addEventListener("click", () => {
          if (
            confirm(
              "确定要清除所有缓存数据吗？这将不会影响JSON文件，但会丢失未保存的标注进度。"
            )
          ) {
            clearCache();
          }
        });
    </script>
  </body>
</html>