Hugging Face's logo

Spaces:
sparkthai
/
README
Running

App Files Community
sparkthai-ai commited on
Commit
580db07
·
verified ·
1 Parent(s): 9ef23ab

Redesign org profile page: brand colors, product highlights, principles

Browse files
Files changed (3) hide show
  1. README.md +2 -2
  2. index.html +59 -10
  3. style.css +196 -17
README.md CHANGED
@@ -1,7 +1,7 @@
1
  ---
2
  title: sparkthai
3
- emoji: 📬
4
- colorFrom: yellow
5
  colorTo: gray
6
  sdk: static
7
  pinned: false
 
1
  ---
2
  title: sparkthai
3
+ emoji: ⚡
4
+ colorFrom: green
5
  colorTo: gray
6
  sdk: static
7
  pinned: false
index.html CHANGED
@@ -1,19 +1,68 @@
1
  <!doctype html>
2
- <html>
3
  <head>
4
  <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
  <link rel="stylesheet" href="style.css" />
8
  </head>
9
  <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
17
  </div>
18
  </body>
19
  </html>
 
1
  <!doctype html>
2
+ <html lang="th">
3
  <head>
4
  <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>SparkThai</title>
7
  <link rel="stylesheet" href="style.css" />
8
  </head>
9
  <body>
10
+ <div class="wrap">
11
+ <div class="hero">
12
+ <img class="icon" src="https://www.sparkthai.com/logo-icon-tight.png" alt="SparkThai" />
13
+ <h1>SparkThai</h1>
14
+ <p class="tagline">เลิกเช่า AI แล้วเป็นเจ้าของมันเองสิ</p>
15
+ <p class="sub">
16
+ โครงสร้างพื้นฐาน AI ที่ตั้งอยู่ในบ้านคุณเอง พร้อมเครื่องมือ AI ที่ใช้ภาษาไทยได้จริง —
17
+ ไม่ต้องพึ่งคลาวด์ ไม่มีความเสี่ยงเรื่องความเป็นส่วนตัวของข้อมูล
18
+ </p>
19
+ <div class="links">
20
+ <a class="primary" href="https://www.sparkthai.com" target="_blank" rel="noopener">🌐 sparkthai.com</a>
21
+ <a href="https://github.com/sparkthai" target="_blank" rel="noopener">GitHub</a>
22
+ <a href="https://x.com/sparkthai" target="_blank" rel="noopener">X / Twitter</a>
23
+ <a href="https://linkedin.com/company/sparkthai" target="_blank" rel="noopener">LinkedIn</a>
24
+ </div>
25
+ </div>
26
+
27
+ <p class="section-title">สิ่งที่เราทำ</p>
28
+ <div class="cards">
29
+ <div class="card">
30
+ <span class="emoji">🖥️</span>
31
+ <h3>NVIDIA DGX Spark Thailand</h3>
32
+ <p>
33
+ ตัวแทนจำหน่ายซูเปอร์คอมพิวเตอร์ AI ขนาดตั้งโต๊ะจาก ASUS, Dell, HP, Lenovo, MSI และ
34
+ NVIDIA พร้อม agentic AI stack ที่ใช้งานได้ทันที
35
+ </p>
36
+ </div>
37
+ <div class="card">
38
+ <span class="emoji">🧠</span>
39
+ <h3>Thai LLM Leaderboard</h3>
40
+ <p>
41
+ จัดอันดับโมเดลภาษาไทยตาม MMLU-TH, tokens/sec และราคา ช่วยเลือกโมเดลที่เหมาะกับ
42
+ ฮาร์ดแวร์ของคุณ
43
+ </p>
44
+ </div>
45
+ <div class="card">
46
+ <span class="emoji">✉️</span>
47
+ <h3>Mailtender</h3>
48
+ <p>
49
+ ผู้ช่วย AI จัดการกล่องเมลสำหรับเจ้าของธุรกิจตัวเล็ก คัดแยกด้วยกติกาก่อนโมเดล
50
+ ค้นเนื้อเมลได้ทั้งไทยและอังกฤษ
51
+ </p>
52
+ </div>
53
+ </div>
54
+
55
+ <div class="principles">
56
+ <h2>หลักที่เรายึดในทุกเครื่องมือ AI ที่สร้าง</h2>
57
+ <ul>
58
+ <li><b>กติกาก่อน โมเดลทีหลัง</b> — อะไรที่เขียนกติกาได้ ให้กติกาทำ เหลือเฉพาะที่ไม่แน่ใจจึงค่อยจ่ายค่าโมเดล</li>
59
+ <li><b>ภาษาไทยต้องใช้ได้จริง</b> — ไม่ใช่แค่แสดงผลเป็นไทย แต่ค้นหาและตัดคำได้ถูกต้อง</li>
60
+ <li><b>มนุษย์อนุมัติก่อนเสมอ</b> — สำหรับสิ่งที่เรียกคืนไม่ได้ เช่นการส่งอีเมลออกไปหาลูกค้าจริง</li>
61
+ <li><b>ข้อมูลอยู่ในเครื่องเป็นค่าเริ่มต้น</b> — อะไรที่จะออกนอกเครื่องต้องเปิดเองอย่างตั้งใจ</li>
62
+ </ul>
63
+ </div>
64
+
65
+ <p class="footer">สร้างในประเทศไทย 🇹🇭</p>
66
  </div>
67
  </body>
68
  </html>
style.css CHANGED
@@ -1,28 +1,207 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  }
17
 
18
  .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
28
  }
 
1
+ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap");
2
+
3
+ :root {
4
+ --bg: #0c0c0c;
5
+ --card: #1d1d1d;
6
+ --border: #ffffff1f;
7
+ --text: #f3f3f3;
8
+ --muted: #b7b7b7;
9
+ --green: #a5de15;
10
+ --green-dim: #76b900;
11
+ }
12
+
13
+ * {
14
+ box-sizing: border-box;
15
+ }
16
+
17
  body {
18
+ margin: 0;
19
+ padding: 3rem 1.25rem 4rem;
20
+ background: radial-gradient(60% 50% at 50% 0%, #14210280 0%, var(--bg) 60%), var(--bg);
21
+ color: var(--text);
22
+ font-family: "IBM Plex Sans Thai", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
23
+ }
24
+
25
+ .wrap {
26
+ max-width: 780px;
27
+ margin: 0 auto;
28
+ }
29
+
30
+ .hero {
31
+ text-align: center;
32
+ margin-bottom: 2.5rem;
33
+ }
34
+
35
+ .hero img.icon {
36
+ width: 76px;
37
+ height: 76px;
38
+ border-radius: 18px;
39
+ margin-bottom: 1.25rem;
40
+ }
41
+
42
+ .hero h1 {
43
+ font-size: 2.25rem;
44
+ font-weight: 700;
45
+ margin: 0 0 0.6rem;
46
+ letter-spacing: -0.02em;
47
+ }
48
+
49
+ .hero p.tagline {
50
+ color: var(--green);
51
+ font-size: 1.15rem;
52
+ font-weight: 600;
53
+ margin: 0 0 0.5rem;
54
+ }
55
+
56
+ .hero p.sub {
57
+ color: var(--muted);
58
+ font-size: 1rem;
59
+ max-width: 560px;
60
+ margin: 0 auto;
61
+ line-height: 1.7;
62
+ }
63
+
64
+ .links {
65
+ display: flex;
66
+ justify-content: center;
67
+ flex-wrap: wrap;
68
+ gap: 0.6rem;
69
+ margin-top: 1.75rem;
70
+ }
71
+
72
+ .links a {
73
+ display: inline-flex;
74
+ align-items: center;
75
+ gap: 0.4rem;
76
+ padding: 0.5rem 1rem;
77
+ border: 1px solid var(--border);
78
+ border-radius: 999px;
79
+ color: var(--text);
80
+ text-decoration: none;
81
+ font-size: 0.9rem;
82
+ font-weight: 500;
83
+ transition: border-color 0.2s ease, transform 0.2s ease;
84
+ }
85
+
86
+ .links a:hover {
87
+ border-color: var(--green-dim);
88
+ transform: translateY(-1px);
89
+ }
90
+
91
+ .links a.primary {
92
+ background: var(--green);
93
+ border-color: var(--green);
94
+ color: #0c0c0c;
95
+ font-weight: 600;
96
  }
97
 
98
+ .links a.primary:hover {
99
+ background: #b8f227;
 
100
  }
101
 
102
+ .section-title {
103
+ font-size: 0.8rem;
104
+ text-transform: uppercase;
105
+ letter-spacing: 0.08em;
106
+ color: var(--muted);
107
+ margin: 0 0 1rem;
108
+ text-align: center;
109
+ }
110
+
111
+ .cards {
112
+ display: grid;
113
+ grid-template-columns: repeat(3, 1fr);
114
+ gap: 1rem;
115
+ margin-bottom: 3rem;
116
+ }
117
+
118
+ @media (max-width: 680px) {
119
+ .cards {
120
+ grid-template-columns: 1fr;
121
+ }
122
  }
123
 
124
  .card {
125
+ background: var(--card);
126
+ border: 1px solid var(--border);
127
+ border-radius: 16px;
128
+ padding: 1.5rem;
129
+ }
130
+
131
+ .card .emoji {
132
+ font-size: 1.6rem;
133
+ display: block;
134
+ margin-bottom: 0.75rem;
135
+ }
136
+
137
+ .card h3 {
138
+ font-size: 1rem;
139
+ margin: 0 0 0.5rem;
140
+ color: var(--text);
141
+ }
142
+
143
+ .card p {
144
+ font-size: 0.88rem;
145
+ line-height: 1.65;
146
+ color: var(--muted);
147
+ margin: 0;
148
+ }
149
+
150
+ .principles {
151
+ background: var(--card);
152
+ border: 1px solid var(--border);
153
+ border-radius: 16px;
154
+ padding: 2rem;
155
+ }
156
+
157
+ .principles h2 {
158
+ font-size: 1.1rem;
159
+ margin: 0 0 1.25rem;
160
+ text-align: center;
161
+ }
162
+
163
+ .principles ul {
164
+ list-style: none;
165
+ margin: 0;
166
+ padding: 0;
167
+ display: grid;
168
+ grid-template-columns: repeat(2, 1fr);
169
+ gap: 1rem 1.5rem;
170
+ }
171
+
172
+ @media (max-width: 680px) {
173
+ .principles ul {
174
+ grid-template-columns: 1fr;
175
+ }
176
+ }
177
+
178
+ .principles li {
179
+ font-size: 0.88rem;
180
+ line-height: 1.6;
181
+ color: var(--muted);
182
+ padding-left: 1.1rem;
183
+ position: relative;
184
+ }
185
+
186
+ .principles li::before {
187
+ content: "";
188
+ position: absolute;
189
+ left: 0;
190
+ top: 0.5em;
191
+ width: 6px;
192
+ height: 6px;
193
+ border-radius: 50%;
194
+ background: var(--green);
195
+ }
196
+
197
+ .principles li b {
198
+ color: var(--text);
199
+ font-weight: 600;
200
  }
201
 
202
+ .footer {
203
+ text-align: center;
204
+ margin-top: 3rem;
205
+ color: var(--muted);
206
+ font-size: 0.85rem;
207
  }