Hugging Face's logo

Spaces:
osolmaz
/
tilekit
Running

App Files Community
tilekit
File size: 5,522 Bytes
5aed101
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6e309e5
 
e5b64b6
 
 
 
 
 
 
 
 
 
 
 
 
 
6e309e5
 
 
5aed101
 
 
 
7bd60d9
5aed101
 
 
 
 
3a2fcd3
 
 
 
5aed101
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7614202
5aed101
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#0d82df" />
    <meta
      name="description"
      content="Design and export balanced Hugging Face logo wallpapers in real time."
    />
    <title>TileKit Wallpaper Studio</title>
  </head>
  <body>
    <main class="app-shell">
      <header class="hero">
        <div>
          <p class="eyebrow">Browser-native TileKit</p>
          <h1><span aria-hidden="true">🤗</span> Wallpaper Studio</h1>
        </div>
        <a href="https://github.com/osolmaz/tools/tree/main/tilekit" target="_blank" rel="noreferrer">
          Source
        </a>
      </header>

      <section class="workspace">
        <aside class="controls" aria-label="Wallpaper controls">
          <div class="control-section">
            <div class="section-heading">
              <h2>Canvas</h2>
              <span id="pixel-count">2.1 MP</span>
            </div>
            <label>
              Resolution
              <select id="resolution">
                <option value="1920x1080">Full HD · 1920×1080</option>
                <option value="2560x1440">QHD · 2560×1440</option>
                <option value="3840x2160" selected>4K · 3840×2160</option>
                <option value="5120x2880">5K · 5120×2880</option>
                <option value="7680x4320">8K · 7680×4320</option>
                <option value="custom">Custom</option>
              </select>
            </label>
            <div class="split-inputs">
              <label>Width <input id="width" type="number" min="640" max="7680" step="8" value="3840" /></label>
              <label>Height <input id="height" type="number" min="360" max="4320" step="8" value="2160" /></label>
            </div>
          </div>

          <div class="control-section">
            <div class="section-heading"><h2>Symbol</h2></div>
            <div class="symbol-switch" role="group" aria-label="Symbol type">
              <button id="logo-mode" class="symbol-mode" type="button" aria-pressed="true">HF logo</button>
              <button id="emoji-mode" class="symbol-mode" type="button" aria-pressed="false"><span id="mode-emoji">🤗</span> Emoji</button>
            </div>
            <div id="emoji-controls" hidden>
              <button id="emoji-picker-toggle" class="emoji-picker-toggle" type="button" aria-expanded="false" aria-controls="emoji-picker-panel">
                <span id="selected-emoji" class="selected-emoji">🤗</span>
                <span><strong id="selected-emoji-name">Hugging face</strong><small>Choose emoji</small></span>
                <span aria-hidden="true">⌄</span>
              </button>
              <div id="emoji-picker-panel" class="emoji-picker-panel" hidden>
                <div class="picker-loading">Loading emoji…</div>
              </div>
            </div>
            <p class="control-note">Uses Apple Emoji on Apple devices and the native emoji style elsewhere.</p>
          </div>

          <div class="control-section">
            <div class="section-heading"><h2>Layout</h2><button id="reset" class="text-button">Reset</button></div>
            <label class="range-label">
              <span>Density <output id="density-value">88</output></span>
              <input id="density" type="range" min="24" max="512" step="1" value="88" />
            </label>
            <label class="range-label">
              <span>Logo size <output id="size-value">1.00×</output></span>
              <input id="logo-size" type="range" min="0.5" max="1.6" step="0.01" value="1" />
            </label>
            <label class="range-label">
              <span>Size variation <output id="size-variation-value">100%</output></span>
              <input id="size-variation" type="range" min="0" max="1.5" step="0.01" value="1" />
            </label>
            <label class="range-label">
              <span>Spacing <output id="spacing-value">1.00×</output></span>
              <input id="spacing" type="range" min="0.25" max="2" step="0.01" value="1" />
            </label>
            <label class="range-label">
              <span>Rotation <output id="rotation-value">52°</output></span>
              <input id="rotation" type="range" min="0" max="70" step="1" value="52" />
            </label>
            <div class="seed-row">
              <label>Seed <input id="seed" type="number" min="0" max="4294967295" step="1" value="84237" /></label>
              <button id="randomize" class="icon-button" title="Randomize seed" aria-label="Randomize seed">↻</button>
            </div>
          </div>

          <button id="export" class="export-button">Render 4K PNG</button>
          <button id="share" class="share-button" type="button">Copy share URL</button>
          <p id="export-status" class="export-status" role="status">Rendered locally in your browser.</p>
        </aside>

        <section class="preview-panel" aria-label="Live wallpaper preview">
          <div class="preview-toolbar">
            <span><i class="live-dot"></i> Live preview</span>
            <span id="render-stats">Ready</span>
          </div>
          <div id="canvas-wrap" class="canvas-wrap">
            <canvas id="preview" aria-label="Wallpaper preview"></canvas>
          </div>
        </section>
      </section>
    </main>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>