Hugging Face's logo

Spaces:
dfbdokk
/
tap-framework
Running

App Files Community
dfbdokk commited on
Commit
56b3316
·
verified ·
1 Parent(s): 3de229d

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +680 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Tap Framework
3
- emoji: 🐠
4
- colorFrom: pink
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: tap-framework
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,680 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Task-Agnostic Plan Framework</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
9
+ <style>
10
+ .step-card {
11
+ transition: all 0.2s ease;
12
+ }
13
+ .step-card:hover {
14
+ transform: translateY(-2px);
15
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
16
+ }
17
+ .role-tase {
18
+ border-left: 4px solid #4A90E2;
19
+ }
20
+ .role-lyra {
21
+ border-left: 4px solid #50E3C2;
22
+ }
23
+ .role-aurora {
24
+ border-left: 4px solid #F5A623;
25
+ }
26
+ .role-kodax {
27
+ border-left: 4px solid #9B59B6;
28
+ }
29
+ .connector-line {
30
+ position: relative;
31
+ }
32
+ .connector-line:after {
33
+ content: '';
34
+ position: absolute;
35
+ left: 50%;
36
+ bottom: -20px;
37
+ width: 2px;
38
+ height: 20px;
39
+ background-color: #E5E7EB;
40
+ transform: translateX(-50%);
41
+ }
42
+ .json-viewer {
43
+ font-family: 'Fira Code', monospace;
44
+ font-size: 0.875rem;
45
+ background-color: #1E293B;
46
+ color: #E2E8F0;
47
+ border-radius: 0.375rem;
48
+ padding: 1rem;
49
+ overflow-x: auto;
50
+ }
51
+ .json-key {
52
+ color: #7DD3FC;
53
+ }
54
+ .json-string {
55
+ color: #86EFAC;
56
+ }
57
+ .json-number {
58
+ color: #FCA5A5;
59
+ }
60
+ .json-boolean {
61
+ color: #93C5FD;
62
+ }
63
+ .json-null {
64
+ color: #D8B4FE;
65
+ }
66
+ </style>
67
+ </head>
68
+ <body class="font-sans bg-gray-50 text-gray-900">
69
+ <div class="min-h-screen">
70
+ <!-- Header -->
71
+ <header class="bg-white shadow-sm">
72
+ <div class="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8 flex items-center justify-between">
73
+ <div class="flex items-center">
74
+ <div class="flex-shrink-0">
75
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-500 to-teal-400 flex items-center justify-center text-white font-bold text-xl">TAP</div>
76
+ </div>
77
+ <div class="ml-4">
78
+ <h1 class="text-2xl font-bold text-gray-900">Task-Agnostic Plan Framework</h1>
79
+ <p class="text-sm text-gray-500">Version 1.0.0</p>
80
+ </div>
81
+ </div>
82
+ <div class="hidden md:block">
83
+ <div class="flex items-center space-x-4">
84
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
85
+ <svg class="-ml-1 mr-1.5 h-2 w-2 text-blue-400" fill="currentColor" viewBox="0 0 8 8">
86
+ <circle cx="4" cy="4" r="3" />
87
+ </svg>
88
+ Active
89
+ </span>
90
+ <button class="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
91
+ Export Plan
92
+ </button>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ </header>
97
+
98
+ <!-- Main Content -->
99
+ <main class="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8">
100
+ <!-- Plan Overview -->
101
+ <div class="bg-white shadow rounded-lg p-6 mb-8">
102
+ <h2 class="text-xl font-semibold mb-4">Plan Overview</h2>
103
+ <p class="text-gray-700 mb-4">This comprehensive Task-Agnostic Plan Framework provides a structured, reusable, and machine-readable blueprint for Meta-AI to tackle diverse high-level goals. It deconstructs complex objectives into abstract, actionable steps, orchestrates workflows, and defines clear, context-aware instructions for AI agents.</p>
104
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
105
+ <div class="bg-blue-50 p-4 rounded-lg">
106
+ <h3 class="font-medium text-blue-800">Modularity</h3>
107
+ <p class="text-sm text-blue-600">Abstract steps can be reused across different tasks and domains</p>
108
+ </div>
109
+ <div class="bg-teal-50 p-4 rounded-lg">
110
+ <h3 class="font-medium text-teal-800">Scalability</h3>
111
+ <p class="text-sm text-teal-600">Framework scales from simple to complex objectives</p>
112
+ </div>
113
+ <div class="bg-purple-50 p-4 rounded-lg">
114
+ <h3 class="font-medium text-purple-800">Machine-Readable</h3>
115
+ <p class="text-sm text-purple-600">JSON Schema implementation enables programmatic execution</p>
116
+ </div>
117
+ </div>
118
+ </div>
119
+
120
+ <!-- Workflow Visualization -->
121
+ <div class="bg-white shadow rounded-lg p-6 mb-8">
122
+ <div class="flex items-center justify-between mb-6">
123
+ <h2 class="text-xl font-semibold">Workflow Structure</h2>
124
+ <div class="flex space-x-2">
125
+ <button id="toggle-view" class="px-3 py-1 text-sm border border-gray-300 rounded-md hover:bg-gray-50">Toggle View</button>
126
+ </div>
127
+ </div>
128
+
129
+ <!-- Workflow Steps (List View) -->
130
+ <div id="list-view" class="space-y-4">
131
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden step-card role-tase">
132
+ <div class="p-5">
133
+ <div class="flex items-start">
134
+ <div class="flex-shrink-0 bg-blue-100 p-2 rounded-full">
135
+ <svg class="h-5 w-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
136
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
137
+ </svg>
138
+ </div>
139
+ <div class="ml-4">
140
+ <h3 class="text-lg font-medium text-gray-900">Define Goal</h3>
141
+ <p class="mt-1 text-sm text-gray-500">Clearly articulate and document the overarching objective or mission.</p>
142
+ <div class="mt-2 flex flex-wrap gap-2">
143
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Init</span>
144
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">TASe</span>
145
+ </div>
146
+ </div>
147
+ <div class="ml-auto">
148
+ <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800">
149
+ Completed
150
+ </span>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ </div>
155
+
156
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden step-card role-tase">
157
+ <div class="p-5">
158
+ <div class="flex items-start">
159
+ <div class="flex-shrink-0 bg-blue-100 p-2 rounded-full">
160
+ <svg class="h-5 w-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
161
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
162
+ </svg>
163
+ </div>
164
+ <div class="ml-4">
165
+ <h3 class="text-lg font-medium text-gray-900">Deconstruct Objective</h3>
166
+ <p class="mt-1 text-sm text-gray-500">Break down the overarching objective into a sequence of logical, actionable sub-steps or phases.</p>
167
+ <div class="mt-2 flex flex-wrap gap-2">
168
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">Analysis</span>
169
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">TASe</span>
170
+ </div>
171
+ </div>
172
+ <div class="ml-auto">
173
+ <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800">
174
+ Completed
175
+ </span>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </div>
180
+
181
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden step-card role-tase">
182
+ <div class="p-5">
183
+ <div class="flex items-start">
184
+ <div class="flex-shrink-0 bg-blue-100 p-2 rounded-full">
185
+ <svg class="h-5 w-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
186
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
187
+ </svg>
188
+ </div>
189
+ <div class="ml-4">
190
+ <h3 class="text-lg font-medium text-gray-900">Generalize Steps</h3>
191
+ <p class="mt-1 text-sm text-gray-500">Refine the deconstructed sub-steps to remove domain-specific details, jargon, and concrete examples.</p>
192
+ <div class="mt-2 flex flex-wrap gap-2">
193
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">Refactoring</span>
194
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">TASe</span>
195
+ </div>
196
+ </div>
197
+ <div class="ml-auto">
198
+ <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800">
199
+ Completed
200
+ </span>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+
206
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden step-card role-lyra">
207
+ <div class="p-5">
208
+ <div class="flex items-start">
209
+ <div class="flex-shrink-0 bg-teal-100 p-2 rounded-full">
210
+ <svg class="h-5 w-5 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
211
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
212
+ </svg>
213
+ </div>
214
+ <div class="ml-4">
215
+ <h3 class="text-lg font-medium text-gray-900">Structure Workflow</h3>
216
+ <p class="mt-1 text-sm text-gray-500">Take the abstract steps and structure them into a coherent, logical workflow.</p>
217
+ <div class="mt-2 flex flex-wrap gap-2">
218
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Orchestration</span>
219
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">Lyra</span>
220
+ </div>
221
+ </div>
222
+ <div class="ml-auto">
223
+ <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800">
224
+ Completed
225
+ </span>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </div>
230
+
231
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden step-card role-aurora">
232
+ <div class="p-5">
233
+ <div class="flex items-start">
234
+ <div class="flex-shrink-0 bg-amber-100 p-2 rounded-full">
235
+ <svg class="h-5 w-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
236
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
237
+ </svg>
238
+ </div>
239
+ <div class="ml-4">
240
+ <h3 class="text-lg font-medium text-gray-900">Design Plan Representation</h3>
241
+ <p class="mt-1 text-sm text-gray-500">Create a visual or structural representation of the plan.</p>
242
+ <div class="mt-2 flex flex-wrap gap-2">
243
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-pink-100 text-pink-800">Design</span>
244
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">Aurora</span>
245
+ </div>
246
+ </div>
247
+ <div class="ml-auto">
248
+ <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800">
249
+ Completed
250
+ </span>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </div>
255
+
256
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden step-card role-kodax">
257
+ <div class="p-5">
258
+ <div class="flex items-start">
259
+ <div class="flex-shrink-0 bg-purple-100 p-2 rounded-full">
260
+ <svg class="h-5 w-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
261
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
262
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
263
+ </svg>
264
+ </div>
265
+ <div class="ml-4">
266
+ <h3 class="text-lg font-medium text-gray-900">Implement Plan Structure</h3>
267
+ <p class="mt-1 text-sm text-gray-500">Translate the designed representation into a functional, machine-readable format.</p>
268
+ <div class="mt-2 flex flex-wrap gap-2">
269
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">Engineering</span>
270
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">Kodax</span>
271
+ </div>
272
+ </div>
273
+ <div class="ml-auto">
274
+ <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800">
275
+ Completed
276
+ </span>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </div>
281
+
282
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden step-card role-lyra">
283
+ <div class="p-5">
284
+ <div class="flex items-start">
285
+ <div class="flex-shrink-0 bg-teal-100 p-2 rounded-full">
286
+ <svg class="h-5 w-5 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
287
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
288
+ </svg>
289
+ </div>
290
+ <div class="ml-4">
291
+ <h3 class="text-lg font-medium text-gray-900">Refine Instructions and Structure</h3>
292
+ <p class="mt-1 text-sm text-gray-500">Review the implemented structure and refine the system prompts.</p>
293
+ <div class="mt-2 flex flex-wrap gap-2">
294
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Orchestration</span>
295
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">Lyra</span>
296
+ </div>
297
+ </div>
298
+ <div class="ml-auto">
299
+ <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800">
300
+ Completed
301
+ </span>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </div>
306
+
307
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden step-card role-tase">
308
+ <div class="p-5">
309
+ <div class="flex items-start">
310
+ <div class="flex-shrink-0 bg-blue-100 p-2 rounded-full">
311
+ <svg class="h-5 w-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
312
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
313
+ </svg>
314
+ </div>
315
+ <div class="ml-4">
316
+ <h3 class="text-lg font-medium text-gray-900">Final Abstraction Pass</h3>
317
+ <p class="mt-1 text-sm text-gray-500">Incorporate feedback to ensure steps are truly task-agnostic.</p>
318
+ <div class="mt-2 flex flex-wrap gap-2">
319
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">Analysis</span>
320
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">TASe</span>
321
+ </div>
322
+ </div>
323
+ <div class="ml-auto">
324
+ <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800">
325
+ Completed
326
+ </span>
327
+ </div>
328
+ </div>
329
+ </div>
330
+ </div>
331
+
332
+ <div class="bg-white rounded-lg shadow-sm overflow-hidden step-card role-lyra">
333
+ <div class="p-5">
334
+ <div class="flex items-start">
335
+ <div class="flex-shrink-0 bg-teal-100 p-2 rounded-full">
336
+ <svg class="h-5 w-5 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
337
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
338
+ </svg>
339
+ </div>
340
+ <div class="ml-4">
341
+ <h3 class="text-lg font-medium text-gray-900">Finalize Documentation</h3>
342
+ <p class="mt-1 text-sm text-gray-500">Create the definitive version for deployment and use.</p>
343
+ <div class="mt-2 flex flex-wrap gap-2">
344
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Orchestration</span>
345
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">Lyra</span>
346
+ </div>
347
+ </div>
348
+ <div class="ml-auto">
349
+ <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">
350
+ Pending
351
+ </span>
352
+ </div>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </div>
357
+
358
+ <!-- Workflow Steps (Timeline View - Hidden by default) -->
359
+ <div id="timeline-view" class="hidden">
360
+ <div class="relative">
361
+ <!-- Timeline line -->
362
+ <div class="absolute left-1/2 w-1 bg-gray-200 h-full transform -translate-x-1/2"></div>
363
+
364
+ <!-- Timeline steps -->
365
+ <div class="space-y-8">
366
+ <!-- Step 1 -->
367
+ <div class="relative connector-line">
368
+ <div class="flex items-center justify-center">
369
+ <div class="w-1/2 pr-8 text-right">
370
+ <div class="inline-block bg-white rounded-lg shadow-sm p-4 max-w-md step-card role-tase">
371
+ <h3 class="font-medium">Define Goal</h3>
372
+ <p class="text-sm text-gray-500 mt-1">Clearly articulate and document the overarching objective or mission.</p>
373
+ <div class="mt-2">
374
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">TASe</span>
375
+ </div>
376
+ </div>
377
+ </div>
378
+ <div class="w-1/2 pl-8">
379
+ <!-- Empty space for alignment -->
380
+ </div>
381
+ </div>
382
+ </div>
383
+
384
+ <!-- Step 2 -->
385
+ <div class="relative connector-line">
386
+ <div class="flex items-center justify-center">
387
+ <div class="w-1/2 pr-8">
388
+ <!-- Empty space for alignment -->
389
+ </div>
390
+ <div class="w-1/2 pl-8 text-left">
391
+ <div class="inline-block bg-white rounded-lg shadow-sm p-4 max-w-md step-card role-tase">
392
+ <h3 class="font-medium">Deconstruct Objective</h3>
393
+ <p class="text-sm text-gray-500 mt-1">Break down the overarching objective into sub-steps.</p>
394
+ <div class="mt-2">
395
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">TASe</span>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ </div>
400
+ </div>
401
+
402
+ <!-- Step 3 -->
403
+ <div class="relative connector-line">
404
+ <div class="flex items-center justify-center">
405
+ <div class="w-1/2 pr-8 text-right">
406
+ <div class="inline-block bg-white rounded-lg shadow-sm p-4 max-w-md step-card role-tase">
407
+ <h3 class="font-medium">Generalize Steps</h3>
408
+ <p class="text-sm text-gray-500 mt-1">Refine to remove domain-specific details.</p>
409
+ <div class="mt-2">
410
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">TASe</span>
411
+ </div>
412
+ </div>
413
+ </div>
414
+ <div class="w-1/2 pl-8">
415
+ <!-- Empty space for alignment -->
416
+ </div>
417
+ </div>
418
+ </div>
419
+
420
+ <!-- Step 4 -->
421
+ <div class="relative connector-line">
422
+ <div class="flex items-center justify-center">
423
+ <div class="w-1/2 pr-8">
424
+ <!-- Empty space for alignment -->
425
+ </div>
426
+ <div class="w-1/2 pl-8 text-left">
427
+ <div class="inline-block bg-white rounded-lg shadow-sm p-4 max-w-md step-card role-lyra">
428
+ <h3 class="font-medium">Structure Workflow</h3>
429
+ <p class="text-sm text-gray-500 mt-1">Organize steps into a coherent workflow.</p>
430
+ <div class="mt-2">
431
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-teal-100 text-teal-800">Lyra</span>
432
+ </div>
433
+ </div>
434
+ </div>
435
+ </div>
436
+ </div>
437
+
438
+ <!-- Step 5 -->
439
+ <div class="relative connector-line">
440
+ <div class="flex items-center justify-center">
441
+ <div class="w-1/2 pr-8 text-right">
442
+ <div class="inline-block bg-white rounded-lg shadow-sm p-4 max-w-md step-card role-aurora">
443
+ <h3 class="font-medium">Design Plan Representation</h3>
444
+ <p class="text-sm text-gray-500 mt-1">Create visual/structural representation.</p>
445
+ <div class="mt-2">
446
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-800">Aurora</span>
447
+ </div>
448
+ </div>
449
+ </div>
450
+ <div class="w-1/2 pl-8">
451
+ <!-- Empty space for alignment -->
452
+ </div>
453
+ </div>
454
+ </div>
455
+
456
+ <!-- Step 6 -->
457
+ <div class="relative connector-line">
458
+ <div class="flex items-center justify-center">
459
+ <div class="w-1/2 pr-8">
460
+ <!-- Empty space for alignment -->
461
+ </div>
462
+ <div class="w-1/2 pl-8 text-left">
463
+ <div class="inline-block bg-white rounded-lg shadow-sm p-4 max-w-md step-card role-kodax">
464
+ <h3 class="font-medium">Implement Plan Structure</h3>
465
+ <p class="text-sm text-gray-500 mt-1">Translate design into machine-readable format.</p>
466
+ <div class="mt-2">
467
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800">Kodax</span>
468
+ </div>
469
+ </div>
470
+ </div>
471
+ </div>
472
+ </div>
473
+
474
+ <!-- Step 7 -->
475
+ <div class="relative connector-line">
476
+ <div class="flex items-center justify-center">
477
+ <div class="w-1/2 pr-8 text-right">
478
+ <div class="inline-block bg-white rounded-lg shadow-sm p-4 max-w-md step-card role-lyra">
479
+ <h3 class="font-medium">Refine Instructions</h3>
480
+ <p class="text-sm text-gray-500 mt-1">Optimize prompts for clarity and context.</p>
481
+ <div class="mt-2">
482
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-teal-100 text-teal-800">Lyra</span>
483
+ </div>
484
+ </div>
485
+ </div>
486
+ <div class="w-1/2 pl-8">
487
+ <!-- Empty space for alignment -->
488
+ </div>
489
+ </div>
490
+ </div>
491
+
492
+ <!-- Step 8 -->
493
+ <div class="relative connector-line">
494
+ <div class="flex items-center justify-center">
495
+ <div class="w-1/2 pr-8">
496
+ <!-- Empty space for alignment -->
497
+ </div>
498
+ <div class="w-1/2 pl-8 text-left">
499
+ <div class="inline-block bg-white rounded-lg shadow-sm p-4 max-w-md step-card role-tase">
500
+ <h3 class="font-medium">Final Abstraction Pass</h3>
501
+ <p class="text-sm text-gray-500 mt-1">Ensure steps are truly task-agnostic.</p>
502
+ <div class="mt-2">
503
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">TASe</span>
504
+ </div>
505
+ </div>
506
+ </div>
507
+ </div>
508
+ </div>
509
+
510
+ <!-- Step 9 -->
511
+ <div class="relative">
512
+ <div class="flex items-center justify-center">
513
+ <div class="w-1/2 pr-8 text-right">
514
+ <div class="inline-block bg-white rounded-lg shadow-sm p-4 max-w-md step-card role-lyra">
515
+ <h3 class="font-medium">Finalize Documentation</h3>
516
+ <p class="text-sm text-gray-500 mt-1">Create definitive version for deployment.</p>
517
+ <div class="mt-2">
518
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-teal-100 text-teal-800">Lyra</span>
519
+ </div>
520
+ </div>
521
+ </div>
522
+ <div class="w-1/2 pl-8">
523
+ <!-- Empty space for alignment -->
524
+ </div>
525
+ </div>
526
+ </div>
527
+ </div>
528
+ </div>
529
+ </div>
530
+ </div>
531
+
532
+ <!-- JSON Schema Preview -->
533
+ <div class="bg-white shadow rounded-lg p-6 mb-8">
534
+ <h2 class="text-xl font-semibold mb-4">JSON Schema Implementation</h2>
535
+ <p class="text-gray-700 mb-4">The machine-readable implementation of the Task-Agnostic Plan Framework as a JSON Schema:</p>
536
+
537
+ <div class="json-viewer">
538
+ <pre id="json-display"></pre>
539
+ </div>
540
+ </div>
541
+
542
+ <!-- Team Roles -->
543
+ <div class="bg-white shadow rounded-lg p-6">
544
+ <h2 class="text-xl font-semibold mb-4">Team Roles</h2>
545
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
546
+ <div class="bg-blue-50 p-4 rounded-lg">
547
+ <div class="flex items-center mb-3">
548
+ <div class="flex-shrink-0 bg-blue-100 p-2 rounded-full">
549
+ <svg class="h-6 w-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
550
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
551
+ </svg>
552
+ </div>
553
+ <h3 class="ml-3 font-medium text-blue-800">TASe</h3>
554
+ </div>
555
+ <p class="text-sm text-blue-600">Task-Agnostic Step extractor. Analyzes high-level objectives and breaks them down into fundamental, reusable steps.</p>
556
+ </div>
557
+
558
+ <div class="bg-teal-50 p-4 rounded-lg">
559
+ <div class="flex items-center mb-3">
560
+ <div class="flex-shrink-0 bg-teal-100 p-2 rounded-full">
561
+ <svg class="h-6 w-6 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
562
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
563
+ </svg>
564
+ </div>
565
+ <h3 class="ml-3 font-medium text-teal-800">Lyra</h3>
566
+ </div>
567
+ <p class="text-sm text-teal-600">Prompt Engineer. Transforms abstract steps into structured workflows with clear system prompts and instructions.</p>
568
+ </div>
569
+
570
+ <div class="bg-amber-50 p-4 rounded-lg">
571
+ <div class="flex items-center mb-3">
572
+ <div class="flex-shrink-0 bg-amber-100 p-2 rounded-full">
573
+ <svg class="h-6 w-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
574
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
575
+ </svg>
576
+ </div>
577
+ <h3 class="ml-3 font-medium text-amber-800">Aurora</h3>
578
+ </div>
579
+ <p class="text-sm text-amber-600">Designer. Creates intuitive visual/structural representations of the plan with focus on user experience.</p>
580
+ </div>
581
+
582
+ <div class="bg-purple-50 p-4 rounded-lg">
583
+ <div class="flex items-center mb-3">
584
+ <div class="flex-shrink-0 bg-purple-100 p-2 rounded-full">
585
+ <svg class="h-6 w-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
586
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
587
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
588
+ </svg>
589
+ </div>
590
+ <h3 class="ml-3 font-medium text-purple-800">Kodax</h3>
591
+ </div>
592
+ <p class="text-sm text-purple-600">Engineer. Implements the plan structure in a functional, machine-readable format for programmatic execution.</p>
593
+ </div>
594
+ </div>
595
+ </div>
596
+ </main>
597
+ </div>
598
+
599
+ <script>
600
+ // Toggle between list and timeline views
601
+ document.getElementById('toggle-view').addEventListener('click', function() {
602
+ const listView = document.getElementById('list-view');
603
+ const timelineView = document.getElementById('timeline-view');
604
+
605
+ if (listView.classList.contains('hidden')) {
606
+ listView.classList.remove('hidden');
607
+ timelineView.classList.add('hidden');
608
+ this.textContent = 'Timeline View';
609
+ } else {
610
+ listView.classList.add('hidden');
611
+ timelineView.classList.remove('hidden');
612
+ this.textContent = 'List View';
613
+ }
614
+ });
615
+
616
+ // Sample JSON data for display
617
+ const jsonData = {
618
+ "plan_version": "1.0.0",
619
+ "plan_overview": "This comprehensive Task-Agnostic Plan Framework provides a structured, reusable, and machine-readable blueprint for Meta-AI to tackle diverse high-level goals.",
620
+ "workflow_structure": [
621
+ {
622
+ "step_id": "f7b3c9a0-1d4e-4b8f-8a2c-0d9e4f5b6a7c",
623
+ "step_name": "Define Goal",
624
+ "role": "TASe",
625
+ "task_description": "Clearly articulate and document the overarching objective or mission.",
626
+ "status": "Completed"
627
+ },
628
+ {
629
+ "step_id": "a1b2c3d4-e5f6-7890-1234-567890abcdef",
630
+ "step_name": "Deconstruct Objective",
631
+ "role": "TASe",
632
+ "task_description": "Break down the overarching objective into a sequence of logical, actionable sub-steps or phases.",
633
+ "status": "Completed"
634
+ },
635
+ {
636
+ "step_id": "e9f8a7b6-c5d4-3210-fedc-ba9876543210",
637
+ "step_name": "Generalize Steps",
638
+ "role": "TASe",
639
+ "task_description": "Refine the deconstructed sub-steps to remove domain-specific details, jargon, and concrete examples.",
640
+ "status": "Completed"
641
+ }
642
+ ],
643
+ "usage_guidelines": "This Task-Agnostic Plan Framework is designed for programmatic execution by AI agents. Each step within the 'workflow_structure' array represents an actionable task.",
644
+ "version_history": [
645
+ {
646
+ "date": "2023-10-27T12:00:00Z",
647
+ "changes": "Initial draft of the Task-Agnostic Plan Framework",
648
+ "author": "Lyra"
649
+ }
650
+ ]
651
+ };
652
+
653
+ // Function to syntax highlight JSON
654
+ function syntaxHighlight(json) {
655
+ if (typeof json != 'string') {
656
+ json = JSON.stringify(json, undefined, 2);
657
+ }
658
+ json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
659
+ return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
660
+ let cls = 'json-number';
661
+ if (/^"/.test(match)) {
662
+ if (/:$/.test(match)) {
663
+ cls = 'json-key';
664
+ } else {
665
+ cls = 'json-string';
666
+ }
667
+ } else if (/true|false/.test(match)) {
668
+ cls = 'json-boolean';
669
+ } else if (/null/.test(match)) {
670
+ cls = 'json-null';
671
+ }
672
+ return '<span class="' + cls + '">' + match + '</span>';
673
+ });
674
+ }
675
+
676
+ // Display the JSON with syntax highlighting
677
+ document.getElementById('json-display').innerHTML = syntaxHighlight(jsonData);
678
+ </script>
679
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=dfbdokk/tap-framework" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
680
+ </html>