File size: 15,151 Bytes
45e03be
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documentation | Geometric Flow Cathedral</title>
    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234285F4'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#e8f0fe',
                            100: '#d2e3fc',
                            500: '#4285f4',
                            600: '#1a73e8',
                            700: '#1967d2',
                        },
                        google: {
                            blue: '#4285F4',
                            red: '#EA4335',
                            yellow: '#FBBC04',
                            green: '#34A853',
                        }
                    },
                    fontFamily: {
                        mono: ['Roboto Mono', 'Consolas', 'Monaco', 'monospace'],
                        sans: ['Google Sans', 'Roboto', 'system-ui', 'sans-serif'],
                    }
                }
            }
        }
    </script>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Roboto+Mono:wght@300;400;500&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body class="bg-white text-gray-800 font-sans antialiased selection:bg-primary-100 selection:text-primary-900">
    <script src="components/site-header.js" type="module"></script>
    <script src="components/alert-banner.js" type="module"></script>
    
    <site-header></site-header>

    <main class="pt-24 pb-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
        <div class="mb-12">
            <div class="flex items-center gap-2 text-sm text-gray-500 mb-4">
                <a href="index.html" class="hover:text-primary-600 transition-colors">Home</a>
                <i data-feather="chevron-right" class="w-4 h-4"></i>
                <span class="text-gray-900">Documentation</span>
            </div>
            <h1 class="text-4xl font-medium text-gray-900 mb-4">Technical Documentation</h1>
            <p class="text-xl text-gray-600 max-w-3xl">Complete reference for the Geometric Flow Cathedral optimization pipeline, including API specifications, configuration guides, and implementation details.</p>
        </div>

        <div class="grid lg:grid-cols-4 gap-8">
            <!-- Sidebar Navigation -->
            <aside class="lg:col-span-1 space-y-6">
                <div class="sticky top-24 space-y-6">
                    <div class="p-4 bg-gray-50 rounded-lg border border-gray-200">
                        <h3 class="font-medium text-gray-900 mb-3">Quick Links</h3>
                        <ul class="space-y-2 text-sm">
                            <li><a href="#overview" class="text-gray-600 hover:text-primary-600 transition-colors flex items-center gap-2"><i data-feather="file-text" class="w-4 h-4"></i> Overview</a></li>
                            <li><a href="#installation" class="text-gray-600 hover:text-primary-600 transition-colors flex items-center gap-2"><i data-feather="download" class="w-4 h-4"></i> Installation</a></li>
                            <li><a href="#configuration" class="text-gray-600 hover:text-primary-600 transition-colors flex items-center gap-2"><i data-feather="settings" class="w-4 h-4"></i> Configuration</a></li>
                            <li><a href="#api-reference" class="text-gray-600 hover:text-primary-600 transition-colors flex items-center gap-2"><i data-feather="code" class="w-4 h-4"></i> API Reference</a></li>
                            <li><a href="#examples" class="text-gray-600 hover:text-primary-600 transition-colors flex items-center gap-2"><i data-feather="terminal" class="w-4 h-4"></i> Examples</a></li>
                        </ul>
                    </div>
                    
                    <alert-banner type="info" message="Documentation version 1.0.0 matches the current stable release."></alert-banner>
                </div>
            </aside>

            <!-- Main Content -->
            <div class="lg:col-span-3 space-y-12">
                <section id="overview" class="scroll-mt-24">
                    <h2 class="text-2xl font-medium text-gray-900 mb-4 flex items-center gap-3">
                        <span class="w-8 h-8 rounded-lg bg-primary-100 text-primary-600 flex items-center justify-center text-sm">01</span>
                        Overview
                    </h2>
                    <div class="prose prose-lg max-w-none text-gray-600 space-y-4">
                        <p>The Geometric Flow Cathedral implements a novel approach to traffic optimization by integrating geometric constraints into machine learning pipelines. The system leverages:</p>
                        <ul class="list-disc pl-6 space-y-2">
                            <li><strong>√14 Ratchet Decay:</strong> A decay factor derived from the square root of 14, applied to prevent overfitting and ensure smooth convergence.</li>
                            <li><strong>24-Fold Geometric Filtering:</strong> Temporal filtering based on prime spoke hours (1, 5, 7, 11, 13, 17, 19, 23) to capture cyclical traffic patterns.</li>
                            <li><strong>19.1° Phase Correction:</strong> Standing wave phase offset at 46.875Hz for sensor data synchronization.</li>
                        </ul>
                    </div>
                </section>

                <section id="installation" class="scroll-mt-24">
                    <h2 class="text-2xl font-medium text-gray-900 mb-4 flex items-center gap-3">
                        <span class="w-8 h-8 rounded-lg bg-primary-100 text-primary-600 flex items-center justify-center text-sm">02</span>
                        Installation
                    </h2>
                    <div class="bg-gray-900 rounded-lg overflow-hidden">
                        <div class="bg-gray-800 px-4 py-2 text-xs text-gray-400 font-mono border-b border-gray-700">bash</div>
                        <pre class="p-4 text-sm text-gray-300 overflow-x-auto"><code># Clone the repository
git clone https://github.com/google/geometric-flow-cathedral.git
cd geometric-flow-cathedral

# Install dependencies
pip install -r requirements.txt

# Configure environment variables
cp .env.example .env

# Initialize the pipeline
python -m gfc init</code></pre>
                    </div>
                </section>

                <section id="configuration" class="scroll-mt-24">
                    <h2 class="text-2xl font-medium text-gray-900 mb-4 flex items-center gap-3">
                        <span class="w-8 h-8 rounded-lg bg-primary-100 text-primary-600 flex items-center justify-center text-sm">03</span>
                        Configuration
                    </h2>
                    <div class="overflow-x-auto">
                        <table class="w-full text-left border-collapse border border-gray-200 rounded-lg">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="p-4 border-b border-gray-200 font-medium text-gray-900">Parameter</th>
                                    <th class="p-4 border-b border-gray-200 font-medium text-gray-900">Type</th>
                                    <th class="p-4 border-b border-gray-200 font-medium text-gray-900">Default</th>
                                    <th class="p-4 border-b border-gray-200 font-medium text-gray-900">Description</th>
                                </tr>
                            </thead>
                            <tbody class="text-gray-600">
                                <tr class="border-b border-gray-100">
                                    <td class="p-4 font-mono text-sm text-primary-600">RATchet_DECAY</td>
                                    <td class="p-4 text-sm">float</td>
                                    <td class="p-4 font-mono text-sm">0.267</td>
                                    <td class="p-4 text-sm">1 - 1/√14 decay factor</td>
                                </tr>
                                <tr class="border-b border-gray-100">
                                    <td class="p-4 font-mono text-sm text-primary-600">PHASE_OFFSET</td>
                                    <td class="p-4 text-sm">float</td>
                                    <td class="p-4 font-mono text-sm">19.1</td>
                                    <td class="p-4 text-sm">Phase correction in degrees</td>
                                </tr>
                                <tr class="border-b border-gray-100">
                                    <td class="p-4 font-mono text-sm text-primary-600">PRIME_SPOKES</td>
                                    <td class="p-4 text-sm">list</td>
                                    <td class="p-4 font-mono text-sm">[1,5,7,11,13,17,19,23]</td>
                                    <td class="p-4 text-sm">Active temporal filtering hours</td>
                                </tr>
                                <tr>
                                    <td class="p-4 font-mono text-sm text-primary-600">CONSTRAINT_BLEND</td>
                                    <td class="p-4 text-sm">float</td>
                                    <td class="p-4 font-mono text-sm">0.5</td>
                                    <td class="p-4 text-sm">Geometric constraint weight (0-1)</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </section>

                <section id="api-reference" class="scroll-mt-24">
                    <h2 class="text-2xl font-medium text-gray-900 mb-4 flex items-center gap-3">
                        <span class="w-8 h-8 rounded-lg bg-primary-100 text-primary-600 flex items-center justify-center text-sm">04</span>
                        API Reference
                    </h2>
                    <div class="space-y-6">
                        <div class="p-6 border border-gray-200 rounded-lg bg-gray-50">
                            <div class="flex items-center justify-between mb-3">
                                <h3 class="font-mono text-lg text-gray-900">POST /api/v1/optimize</h3>
                                <span class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-medium">Stable</span>
                            </div>
                            <p class="text-gray-600 mb-4">Submit traffic data for real-time geometric optimization.</p>
                            <div class="bg-gray-900 rounded-lg overflow-hidden">
                                <pre class="p-4 text-sm text-gray-300 overflow-x-auto"><code>{
  "sensor_data": {
    "flow_rate": 120.5,
    "timestamp": "2024-01-15T14:30:00Z",
    "location_id": "intersection_42"
  },
  "constraints": {
    "apply_ratchet": true,
    "phase_correction": 19.1
  }
}</code></pre>
                            </div>
                        </div>
                    </div>
                </section>

                <section id="examples" class="scroll-mt-24">
                    <h2 class="text-2xl font-medium text-gray-900 mb-4 flex items-center gap-3">
                        <span class="w-8 h-8 rounded-lg bg-primary-100 text-primary-600 flex items-center justify-center text-sm">05</span>
                        Examples
                    </h2>
                    <div class="grid md:grid-cols-2 gap-6">
                        <a href="#" class="block p-6 border border-gray-200 rounded-lg hover:border-primary-300 hover:shadow-md transition-all group">
                            <div class="flex items-center gap-3 mb-3">
                                <div class="w-10 h-10 rounded-lg bg-blue-50 text-primary-600 flex items-center justify-center group-hover:bg-primary-600 group-hover:text-white transition-colors">
                                    <i data-feather="map" class="w-5 h-5"></i>
                                </div>
                                <h3 class="font-medium text-gray-900">Urban Traffic Flow</h3>
                            </div>
                            <p class="text-sm text-gray-600">Optimize signal timing across a 24-block grid using geometric constraints.</p>
                        </a>
                        
                        <a href="#" class="block p-6 border border-gray-200 rounded-lg hover:border-primary-300 hover:shadow-md transition-all group">
                            <div class="flex items-center gap-3 mb-3">
                                <div class="w-10 h-10 rounded-lg bg-green-50 text-google-green flex items-center justify-center group-hover:bg-google-green group-hover:text-white transition-colors">
                                    <i data-feather="truck" class="w-5 h-5"></i>
                                </div>
                                <h3 class="font-medium text-gray-900">Freeway Merge Optimization</h3>
                            </div>
                            <p class="text-sm text-gray-600">Reduce congestion at highway on-ramps using predictive modeling.</p>
                        </a>
                    </div>
                </section>
            </div>
        </div>
    </main>

    <footer class="border-t border-gray-200 bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
        <div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-6">
            <div class="flex items-center gap-3">
                <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-primary-600 to-google-green flex items-center justify-center">
                    <i data-feather="activity" class="w-4 h-4 text-white"></i>
                </div>
                <span class="font-medium text-gray-900">Geometric Flow Cathedral</span>
            </div>
            <div class="flex items-center gap-6 text-sm text-gray-600">
                <a href="index.html" class="hover:text-primary-600 transition-colors">Home</a>
                <a href="documentation.html" class="text-primary-600 font-medium">Documentation</a>
                <a href="https://github.com" target="_blank" class="hover:text-primary-600 transition-colors">GitHub</a>
            </div>
            <div class="text-gray-500 text-sm">© 2024 Google AI Infrastructure Team</div>
        </div>
    </footer>

    <script src="script.js" type="module"></script>
    <script>
        if (typeof feather !== 'undefined') {
            feather.replace();
        }
    </script>
</body>
</html>