OpenRevise/liquid_glass.html at main · StartripAI/OpenRevise · 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
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IdeaClaw Institute - Autonomous Generation</title>
    <style>
        :root {
            --primary-crimson: #8C1515;
            --dark-crimson: #6b0f0f;
            --text-heading: #2e2d29;
            --text-body: #4d4f53;
            --bg-light: #ffffff;
            --bg-gray: #f4f4f4;
            --border-color: #e2e2e2;

            --font-serif: "Source Serif Pro", Georgia, "Times New Roman", Times, serif;
            --font-sans: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: var(--font-sans);
            color: var(--text-body);
            background-color: var(--bg-light);
            line-height: 1.6;
        }

        /* Top Navigation Bar */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 24px 60px;
            background-color: var(--bg-light);
            border-bottom: 1px solid var(--border-color);
        }

        .navbar-logo {
            font-family: var(--font-serif);
            font-size: 24px;
            font-weight: 700;
            color: var(--primary-crimson);
            text-decoration: none;
            letter-spacing: 0.5px;
        }

        .navbar-links {
            display: flex;
            align-items: center;
        }

        .navbar-links a {
            font-family: var(--font-sans);
            font-size: 15px;
            font-weight: 600;
            color: var(--text-heading);
            text-decoration: none;
            margin-left: 32px;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: color 0.2s;
        }

        .navbar-links a:hover {
            color: var(--primary-crimson);
        }

        /* Language Toggle Button */
        .lang-btn {
            background: transparent;
            border: 1px solid var(--border-color);
            padding: 6px 12px;
            margin-left: 32px;
            font-family: var(--font-sans);
            font-size: 13px;
            font-weight: 600;
            color: var(--text-heading);
            cursor: pointer;
            transition: all 0.2s;
        }

        .lang-btn:hover {
            border-color: var(--text-heading);
            background: var(--bg-gray);
        }

        /* Hero Section */
        .hero {
            padding: 100px 60px;
            background-color: var(--bg-gray);
            border-bottom: 1px solid var(--border-color);
            text-align: center;
        }

        .hero h1 {
            font-family: var(--font-serif);
            font-size: 52px;
            color: var(--text-heading);
            margin-bottom: 24px;
            line-height: 1.2;
            max-width: 1000px;
            margin-left: auto;
            margin-right: auto;
        }

        .hero p {
            font-size: 20px;
            color: var(--text-body);
            max-width: 800px;
            margin: 0 auto 40px auto;
            font-weight: 300;
        }

        .hero .btn {
            display: inline-block;
            background-color: var(--primary-crimson);
            color: #fff;
            font-family: var(--font-sans);
            font-size: 16px;
            font-weight: 600;
            text-decoration: none;
            padding: 16px 36px;
            border-radius: 2px;
            transition: background-color 0.2s;
        }

        .hero .btn:hover {
            background-color: var(--dark-crimson);
        }

        /* Metrics Strip */
        .metrics {
            display: flex;
            justify-content: center;
            background-color: var(--text-heading);
            color: #fff;
            padding: 40px 60px;
            flex-wrap: wrap;
        }

        .metric-item {
            flex: 1;
            text-align: center;
            min-width: 200px;
            padding: 0 20px;
            border-right: 1px solid rgba(255,255,255,0.2);
        }

        .metric-item:last-child {
            border-right: none;
        }

        .metric-num {
            font-family: var(--font-serif);
            font-size: 48px;
            font-weight: 700;
            color: var(--bg-light);
            margin-bottom: 8px;
        }

        .metric-label {
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: #cccccc;
        }

        /* Content Sections */
        .section {
            padding: 80px 60px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .section-header {
            margin-bottom: 40px;
            text-align: center;
        }

        .section-header h2 {
            font-family: var(--font-serif);
            font-size: 36px;
            color: var(--primary-crimson);
            margin-bottom: 16px;
        }

        .section-header p {
            font-size: 18px;
            max-width: 800px;
            margin: 0 auto;
        }

        /* Feature Grid */
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
        }

        .card {
            background-color: var(--bg-light);
            border-top: 4px solid var(--primary-crimson);
            padding: 32px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.04);
            transition: transform 0.2s;
        }

        .card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 30px rgba(0,0,0,0.08);
        }

        .card h3 {
            font-family: var(--font-serif);
            font-size: 24px;
            color: var(--text-heading);
            margin-bottom: 16px;
        }

        .card p {
            font-size: 16px;
            line-height: 1.6;
        }

        /* Institutional Footer */
        .footer {
            background-color: #1a1a1a;
            color: #ffffff;
            padding: 60px;
            text-align: center;
        }

        .footer p {
            font-size: 14px;
            color: #999999;
            margin-bottom: 8px;
        }

        .footer .footer-logo {
            font-family: var(--font-serif);
            font-size: 20px;
            color: var(--bg-light);
            margin-bottom: 20px;
            display: inline-block;
        }

        @media (max-width: 768px) {
            .navbar { padding: 20px; flex-direction: column; gap: 16px; }
            .navbar-links a { margin-left: 10px; margin-right: 10px; font-size: 13px; }
            .lang-btn { margin-left: 10px; }
            .hero { padding: 60px 20px; }
            .hero h1 { font-size: 32px; }
            .hero p { font-size: 16px; }
            .metrics { flex-direction: column; gap: 40px; padding: 40px 20px; }
            .metric-item { border-right: none; }
            .section { padding: 60px 20px; }
        }

        /* Bilingual Toggle Logic - Hiding */
        .lang-zh { display: none; }
        .lang-en { display: none; }

        .is-zh .lang-zh { display: inline-block; }
        .is-en .lang-en { display: inline-block; }

        /* Fixes for block level elements */
        .is-zh h1 .lang-zh, .is-zh p .lang-zh, .is-zh h2 .lang-zh, .is-zh h3 .lang-zh { display: block; }
        .is-en h1 .lang-en, .is-en p .lang-en, .is-en h2 .lang-en, .is-en h3 .lang-en { display: block; }

    </style>
</head>
<body class="is-zh">

    <!-- Navigation -->
    <nav class="navbar">
        <a href="#" class="navbar-logo">IdeaClaw Institute</a>
        <div class="navbar-links">
            <a href="#">
                <span class="lang-zh">研究</span>
                <span class="lang-en">Research</span>
            </a>
            <a href="#">
                <span class="lang-zh">架构</span>
                <span class="lang-en">Architecture</span>
            </a>
            <a href="https://github.com/StartripAI/IdeaClaw" target="_blank">GitHub</a>
            <button class="lang-btn" onclick="toggleLang()">
                <span class="lang-zh">🌐 ENGLISH</span>
                <span class="lang-en">🌐 简体中文</span>
            </button>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero" id="hero-area">
        <h1>
            <span class="lang-zh">一句话输入，生成任意专业文本交付物。</span>
            <span class="lang-en">One Sentence. Any Structured Deliverable.</span>
        </h1>
        <p>
            <span class="lang-zh">IdeaClaw 是一套面向学术研究与高规格商业场景的结构化生成引擎。结合大模型推演与自愈编排管线，彻底消除长文本推理中的结构崩塌与逻辑遗漏问题。</span>
            <span class="lang-en">IdeaClaw is a Structured Autonomous Generation Engine engineered for academic and high-stakes industry scenarios. Combining LLM inference with a self-healing orchestration pipeline, it eliminates structural collapse and logical omissions in long-form generation.</span>
        </p>
        <a href="https://github.com/StartripAI/IdeaClaw" class="btn">
            <span class="lang-zh">获取源代码</span>
            <span class="lang-en">View Source Code</span>
        </a>
    </section>

    <!-- Metrics Bar -->
    <div class="metrics" id="metrics-area">
        <div class="metric-item">
            <div class="metric-num">131</div>
            <div class="metric-label">
                <span class="lang-zh">种专业排版模板</span>
                <span class="lang-en">Professional Templates</span>
            </div>
        </div>
        <div class="metric-item">
            <div class="metric-num">100%</div>
            <div class="metric-label">
                <span class="lang-zh">强制结构完整度</span>
                <span class="lang-en">Structural Integrity</span>
            </div>
        </div>
        <div class="metric-item">
            <div class="metric-num">3x</div>
            <div class="metric-label">
                <span class="lang-zh">自愈纠错重试</span>
                <span class="lang-en">Self-Healing Retries</span>
            </div>
        </div>
    </div>

    <!-- Core Architecture Grid -->
    <section class="section" id="feature-area">
        <div class="section-header">
            <h2>
                <span class="lang-zh">底层核心架构</span>
                <span class="lang-en">System Architecture</span>
            </h2>
            <p>
                <span class="lang-zh">旨在通过主动自愈反馈回路与严格的执行契约，大幅降低大型语言模型（LLMs）在格式输出上的灾难性失效。</span>
                <span class="lang-en">Engineered to mitigate catastrophic formatting failures in Large Language Models (LLMs) through active self-healing feedback loops and strict execution contracts.</span>
            </p>
        </div>

        <div class="grid">
            <div class="card">
                <h3>
                    <span class="lang-zh">模板驱动执行</span>
                    <span class="lang-en">Template Execution</span>
                </h3>
                <p>
                    <span class="lang-zh">内置 131 套严密的场景结构体。系统基于 MECE 框架拉出高级骨架大纲，提供超越单一提示词的确定性输出。</span>
                    <span class="lang-en">Loaded with 131 rigorous structural templates. The system derives a top-tier outline based on the MECE framework, providing deterministic output far beyond traditional prompts.</span>
                </p>
            </div>
            <div class="card">
                <h3>
                    <span class="lang-zh">Salacia 控制护栏</span>
                    <span class="lang-en">Salacia Guardrails</span>
                </h3>
                <p>
                    <span class="lang-zh">弃用黑盒形式的提示词工程，改用具体的执行契约（Execution Contract），将计算引擎置于严格的结构化输入输出约束中。</span>
                    <span class="lang-en">Bypassing black-box prompt engineering in favor of concrete Execution Contracts, placing the computational engine under strict structured I/O constraints.</span>
                </p>
            </div>
            <div class="card">
                <h3>
                    <span class="lang-zh">结构域自愈</span>
                    <span class="lang-en">Structural Self-Healing</span>
                </h3>
                <p>
                    <span class="lang-zh">针对超长文本的 Token 熔断，构建自动化截断恢复管线。若发现 LLM 截断或漏写，系统将在后台自动捕获错误追踪并重试。</span>
                    <span class="lang-en">Actively mitigates Token truncation during hyper-long generations. If structural omissions are detected, the system catches error traces and autonomously retries until perfection.</span>
                </p>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="footer-logo">IdeaClaw Research</div>
        <p>
            <span class="lang-zh">专注自动化研究与结构化长文生成的开源倡议项目。</span>
            <span class="lang-en">An open-source initiative for autonomous structural content generation and research automation.</span>
        </p>
        <p>&copy; 2026 StartripAI Infrastructure</p>
    </footer>

    <script>
        const body = document.body;

        // Auto-detect browser language on load
        document.addEventListener("DOMContentLoaded", () => {
            const userLang = navigator.language || navigator.userLanguage;
            if (userLang.toLowerCase().includes('en')) {
                body.className = 'is-en';
            } else {
                body.className = 'is-zh';
            }
        });

        // Toggle function
        function toggleLang() {
            // Add a brief subtle fade effect for transition
            const sections = [document.getElementById('hero-area'), document.getElementById('metrics-area'), document.getElementById('feature-area')];

            sections.forEach(sec => sec.style.opacity = '0');

            setTimeout(() => {
                if (body.classList.contains('is-en')) {
                    body.className = 'is-zh';
                } else {
                    body.className = 'is-en';
                }
                sections.forEach(sec => sec.style.opacity = '1');
            }, 150);
        }
    </script>
</body>
</html>