Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Task-Agnostic Plan Framework</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| .step-card { | |
| transition: all 0.2s ease; | |
| } | |
| .step-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| } | |
| .role-tase { | |
| border-left: 4px solid #4A90E2; | |
| } | |
| .role-lyra { | |
| border-left: 4px solid #50E3C2; | |
| } | |
| .role-aurora { | |
| border-left: 4px solid #F5A623; | |
| } | |
| .role-kodax { | |
| border-left: 4px solid #9B59B6; | |
| } | |
| .connector-line { | |
| position: relative; | |
| } | |
| .connector-line:after { | |
| content: ''; | |
| position: absolute; | |
| left: 50%; | |
| bottom: -20px; | |
| width: 2px; | |
| height: 20px; | |
| background-color: #E5E7EB; | |
| transform: translateX(-50%); | |
| } | |
| .json-viewer { | |
| font-family: 'Fira Code', monospace; | |
| font-size: 0.875rem; | |
| background-color: #1E293B; | |
| color: #E2E8F0; | |
| border-radius: 0.375rem; | |
| padding: 1rem; | |
| overflow-x: auto; | |
| } | |
| .json-key { | |
| color: #7DD3FC; | |
| } | |
| .json-string { | |
| color: #86EFAC; | |
| } | |
| .json-number { | |
| color: #FCA5A5; | |
| } | |
| .json-boolean { | |
| color: #93C5FD; | |
| } | |
| .json-null { | |
| color: #D8B4FE; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50 text-gray-900"> | |
| <div class="min-h-screen"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <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> | |
| </div> | |
| <div class="ml-4"> | |
| <h1 class="text-2xl font-bold text-gray-900">Task-Agnostic Plan Framework</h1> | |
| <p class="text-sm text-gray-500">Version 1.0.0</p> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="flex items-center space-x-4"> | |
| <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800"> | |
| <svg class="-ml-1 mr-1.5 h-2 w-2 text-blue-400" fill="currentColor" viewBox="0 0 8 8"> | |
| <circle cx="4" cy="4" r="3" /> | |
| </svg> | |
| Active | |
| </span> | |
| <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"> | |
| Export Plan | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8"> | |
| <!-- Plan Overview --> | |
| <div class="bg-white shadow rounded-lg p-6 mb-8"> | |
| <h2 class="text-xl font-semibold mb-4">Plan Overview</h2> | |
| <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> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="bg-blue-50 p-4 rounded-lg"> | |
| <h3 class="font-medium text-blue-800">Modularity</h3> | |
| <p class="text-sm text-blue-600">Abstract steps can be reused across different tasks and domains</p> | |
| </div> | |
| <div class="bg-teal-50 p-4 rounded-lg"> | |
| <h3 class="font-medium text-teal-800">Scalability</h3> | |
| <p class="text-sm text-teal-600">Framework scales from simple to complex objectives</p> | |
| </div> | |
| <div class="bg-purple-50 p-4 rounded-lg"> | |
| <h3 class="font-medium text-purple-800">Machine-Readable</h3> | |
| <p class="text-sm text-purple-600">JSON Schema implementation enables programmatic execution</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Workflow Visualization --> | |
| <div class="bg-white shadow rounded-lg p-6 mb-8"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-xl font-semibold">Workflow Structure</h2> | |
| <div class="flex space-x-2"> | |
| <button id="toggle-view" class="px-3 py-1 text-sm border border-gray-300 rounded-md hover:bg-gray-50">Toggle View</button> | |
| </div> | |
| </div> | |
| <!-- Workflow Steps (List View) --> | |
| <div id="list-view" class="space-y-4"> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden step-card role-tase"> | |
| <div class="p-5"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-blue-100 p-2 rounded-full"> | |
| <svg class="h-5 w-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <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" /> | |
| </svg> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Define Goal</h3> | |
| <p class="mt-1 text-sm text-gray-500">Clearly articulate and document the overarching objective or mission.</p> | |
| <div class="mt-2 flex flex-wrap gap-2"> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="ml-auto"> | |
| <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800"> | |
| Completed | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden step-card role-tase"> | |
| <div class="p-5"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-blue-100 p-2 rounded-full"> | |
| <svg class="h-5 w-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <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" /> | |
| </svg> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Deconstruct Objective</h3> | |
| <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> | |
| <div class="mt-2 flex flex-wrap gap-2"> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="ml-auto"> | |
| <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800"> | |
| Completed | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden step-card role-tase"> | |
| <div class="p-5"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-blue-100 p-2 rounded-full"> | |
| <svg class="h-5 w-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <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" /> | |
| </svg> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Generalize Steps</h3> | |
| <p class="mt-1 text-sm text-gray-500">Refine the deconstructed sub-steps to remove domain-specific details, jargon, and concrete examples.</p> | |
| <div class="mt-2 flex flex-wrap gap-2"> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="ml-auto"> | |
| <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800"> | |
| Completed | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden step-card role-lyra"> | |
| <div class="p-5"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-teal-100 p-2 rounded-full"> | |
| <svg class="h-5 w-5 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <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" /> | |
| </svg> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Structure Workflow</h3> | |
| <p class="mt-1 text-sm text-gray-500">Take the abstract steps and structure them into a coherent, logical workflow.</p> | |
| <div class="mt-2 flex flex-wrap gap-2"> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="ml-auto"> | |
| <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800"> | |
| Completed | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden step-card role-aurora"> | |
| <div class="p-5"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-amber-100 p-2 rounded-full"> | |
| <svg class="h-5 w-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <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" /> | |
| </svg> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Design Plan Representation</h3> | |
| <p class="mt-1 text-sm text-gray-500">Create a visual or structural representation of the plan.</p> | |
| <div class="mt-2 flex flex-wrap gap-2"> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="ml-auto"> | |
| <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800"> | |
| Completed | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden step-card role-kodax"> | |
| <div class="p-5"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-purple-100 p-2 rounded-full"> | |
| <svg class="h-5 w-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <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" /> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> | |
| </svg> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Implement Plan Structure</h3> | |
| <p class="mt-1 text-sm text-gray-500">Translate the designed representation into a functional, machine-readable format.</p> | |
| <div class="mt-2 flex flex-wrap gap-2"> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="ml-auto"> | |
| <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800"> | |
| Completed | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden step-card role-lyra"> | |
| <div class="p-5"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-teal-100 p-2 rounded-full"> | |
| <svg class="h-5 w-5 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <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" /> | |
| </svg> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Refine Instructions and Structure</h3> | |
| <p class="mt-1 text-sm text-gray-500">Review the implemented structure and refine the system prompts.</p> | |
| <div class="mt-2 flex flex-wrap gap-2"> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="ml-auto"> | |
| <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800"> | |
| Completed | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden step-card role-tase"> | |
| <div class="p-5"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-blue-100 p-2 rounded-full"> | |
| <svg class="h-5 w-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <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" /> | |
| </svg> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Final Abstraction Pass</h3> | |
| <p class="mt-1 text-sm text-gray-500">Incorporate feedback to ensure steps are truly task-agnostic.</p> | |
| <div class="mt-2 flex flex-wrap gap-2"> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="ml-auto"> | |
| <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800"> | |
| Completed | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden step-card role-lyra"> | |
| <div class="p-5"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-teal-100 p-2 rounded-full"> | |
| <svg class="h-5 w-5 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <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" /> | |
| </svg> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Finalize Documentation</h3> | |
| <p class="mt-1 text-sm text-gray-500">Create the definitive version for deployment and use.</p> | |
| <div class="mt-2 flex flex-wrap gap-2"> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="ml-auto"> | |
| <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800"> | |
| Pending | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Workflow Steps (Timeline View - Hidden by default) --> | |
| <div id="timeline-view" class="hidden"> | |
| <div class="relative"> | |
| <!-- Timeline line --> | |
| <div class="absolute left-1/2 w-1 bg-gray-200 h-full transform -translate-x-1/2"></div> | |
| <!-- Timeline steps --> | |
| <div class="space-y-8"> | |
| <!-- Step 1 --> | |
| <div class="relative connector-line"> | |
| <div class="flex items-center justify-center"> | |
| <div class="w-1/2 pr-8 text-right"> | |
| <div class="inline-block bg-white rounded-lg shadow-sm p-4 max-w-md step-card role-tase"> | |
| <h3 class="font-medium">Define Goal</h3> | |
| <p class="text-sm text-gray-500 mt-1">Clearly articulate and document the overarching objective or mission.</p> | |
| <div class="mt-2"> | |
| <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">TASe</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w-1/2 pl-8"> | |
| <!-- Empty space for alignment --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="relative connector-line"> | |
| <div class="flex items-center justify-center"> | |
| <div class="w-1/2 pr-8"> | |
| <!-- Empty space for alignment --> | |
| </div> | |
| <div class="w-1/2 pl-8 text-left"> | |
| <div class="inline-block bg-white rounded-lg shadow-sm p-4 max-w-md step-card role-tase"> | |
| <h3 class="font-medium">Deconstruct Objective</h3> | |
| <p class="text-sm text-gray-500 mt-1">Break down the overarching objective into sub-steps.</p> | |
| <div class="mt-2"> | |
| <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">TASe</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="relative connector-line"> | |
| <div class="flex items-center justify-center"> | |
| <div class="w-1/2 pr-8 text-right"> | |
| <div class="inline-block bg-white rounded-lg shadow-sm p-4 max-w-md step-card role-tase"> | |
| <h3 class="font-medium">Generalize Steps</h3> | |
| <p class="text-sm text-gray-500 mt-1">Refine to remove domain-specific details.</p> | |
| <div class="mt-2"> | |
| <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">TASe</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w-1/2 pl-8"> | |
| <!-- Empty space for alignment --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 4 --> | |
| <div class="relative connector-line"> | |
| <div class="flex items-center justify-center"> | |
| <div class="w-1/2 pr-8"> | |
| <!-- Empty space for alignment --> | |
| </div> | |
| <div class="w-1/2 pl-8 text-left"> | |
| <div class="inline-block bg-white rounded-lg shadow-sm p-4 max-w-md step-card role-lyra"> | |
| <h3 class="font-medium">Structure Workflow</h3> | |
| <p class="text-sm text-gray-500 mt-1">Organize steps into a coherent workflow.</p> | |
| <div class="mt-2"> | |
| <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-teal-100 text-teal-800">Lyra</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 5 --> | |
| <div class="relative connector-line"> | |
| <div class="flex items-center justify-center"> | |
| <div class="w-1/2 pr-8 text-right"> | |
| <div class="inline-block bg-white rounded-lg shadow-sm p-4 max-w-md step-card role-aurora"> | |
| <h3 class="font-medium">Design Plan Representation</h3> | |
| <p class="text-sm text-gray-500 mt-1">Create visual/structural representation.</p> | |
| <div class="mt-2"> | |
| <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-800">Aurora</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w-1/2 pl-8"> | |
| <!-- Empty space for alignment --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 6 --> | |
| <div class="relative connector-line"> | |
| <div class="flex items-center justify-center"> | |
| <div class="w-1/2 pr-8"> | |
| <!-- Empty space for alignment --> | |
| </div> | |
| <div class="w-1/2 pl-8 text-left"> | |
| <div class="inline-block bg-white rounded-lg shadow-sm p-4 max-w-md step-card role-kodax"> | |
| <h3 class="font-medium">Implement Plan Structure</h3> | |
| <p class="text-sm text-gray-500 mt-1">Translate design into machine-readable format.</p> | |
| <div class="mt-2"> | |
| <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800">Kodax</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 7 --> | |
| <div class="relative connector-line"> | |
| <div class="flex items-center justify-center"> | |
| <div class="w-1/2 pr-8 text-right"> | |
| <div class="inline-block bg-white rounded-lg shadow-sm p-4 max-w-md step-card role-lyra"> | |
| <h3 class="font-medium">Refine Instructions</h3> | |
| <p class="text-sm text-gray-500 mt-1">Optimize prompts for clarity and context.</p> | |
| <div class="mt-2"> | |
| <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-teal-100 text-teal-800">Lyra</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w-1/2 pl-8"> | |
| <!-- Empty space for alignment --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 8 --> | |
| <div class="relative connector-line"> | |
| <div class="flex items-center justify-center"> | |
| <div class="w-1/2 pr-8"> | |
| <!-- Empty space for alignment --> | |
| </div> | |
| <div class="w-1/2 pl-8 text-left"> | |
| <div class="inline-block bg-white rounded-lg shadow-sm p-4 max-w-md step-card role-tase"> | |
| <h3 class="font-medium">Final Abstraction Pass</h3> | |
| <p class="text-sm text-gray-500 mt-1">Ensure steps are truly task-agnostic.</p> | |
| <div class="mt-2"> | |
| <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">TASe</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 9 --> | |
| <div class="relative"> | |
| <div class="flex items-center justify-center"> | |
| <div class="w-1/2 pr-8 text-right"> | |
| <div class="inline-block bg-white rounded-lg shadow-sm p-4 max-w-md step-card role-lyra"> | |
| <h3 class="font-medium">Finalize Documentation</h3> | |
| <p class="text-sm text-gray-500 mt-1">Create definitive version for deployment.</p> | |
| <div class="mt-2"> | |
| <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-teal-100 text-teal-800">Lyra</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w-1/2 pl-8"> | |
| <!-- Empty space for alignment --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- JSON Schema Preview --> | |
| <div class="bg-white shadow rounded-lg p-6 mb-8"> | |
| <h2 class="text-xl font-semibold mb-4">JSON Schema Implementation</h2> | |
| <p class="text-gray-700 mb-4">The machine-readable implementation of the Task-Agnostic Plan Framework as a JSON Schema:</p> | |
| <div class="json-viewer"> | |
| <pre id="json-display"></pre> | |
| </div> | |
| </div> | |
| <!-- Team Roles --> | |
| <div class="bg-white shadow rounded-lg p-6"> | |
| <h2 class="text-xl font-semibold mb-4">Team Roles</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="bg-blue-50 p-4 rounded-lg"> | |
| <div class="flex items-center mb-3"> | |
| <div class="flex-shrink-0 bg-blue-100 p-2 rounded-full"> | |
| <svg class="h-6 w-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <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" /> | |
| </svg> | |
| </div> | |
| <h3 class="ml-3 font-medium text-blue-800">TASe</h3> | |
| </div> | |
| <p class="text-sm text-blue-600">Task-Agnostic Step extractor. Analyzes high-level objectives and breaks them down into fundamental, reusable steps.</p> | |
| </div> | |
| <div class="bg-teal-50 p-4 rounded-lg"> | |
| <div class="flex items-center mb-3"> | |
| <div class="flex-shrink-0 bg-teal-100 p-2 rounded-full"> | |
| <svg class="h-6 w-6 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <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" /> | |
| </svg> | |
| </div> | |
| <h3 class="ml-3 font-medium text-teal-800">Lyra</h3> | |
| </div> | |
| <p class="text-sm text-teal-600">Prompt Engineer. Transforms abstract steps into structured workflows with clear system prompts and instructions.</p> | |
| </div> | |
| <div class="bg-amber-50 p-4 rounded-lg"> | |
| <div class="flex items-center mb-3"> | |
| <div class="flex-shrink-0 bg-amber-100 p-2 rounded-full"> | |
| <svg class="h-6 w-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <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" /> | |
| </svg> | |
| </div> | |
| <h3 class="ml-3 font-medium text-amber-800">Aurora</h3> | |
| </div> | |
| <p class="text-sm text-amber-600">Designer. Creates intuitive visual/structural representations of the plan with focus on user experience.</p> | |
| </div> | |
| <div class="bg-purple-50 p-4 rounded-lg"> | |
| <div class="flex items-center mb-3"> | |
| <div class="flex-shrink-0 bg-purple-100 p-2 rounded-full"> | |
| <svg class="h-6 w-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <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" /> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> | |
| </svg> | |
| </div> | |
| <h3 class="ml-3 font-medium text-purple-800">Kodax</h3> | |
| </div> | |
| <p class="text-sm text-purple-600">Engineer. Implements the plan structure in a functional, machine-readable format for programmatic execution.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script> | |
| // Toggle between list and timeline views | |
| document.getElementById('toggle-view').addEventListener('click', function() { | |
| const listView = document.getElementById('list-view'); | |
| const timelineView = document.getElementById('timeline-view'); | |
| if (listView.classList.contains('hidden')) { | |
| listView.classList.remove('hidden'); | |
| timelineView.classList.add('hidden'); | |
| this.textContent = 'Timeline View'; | |
| } else { | |
| listView.classList.add('hidden'); | |
| timelineView.classList.remove('hidden'); | |
| this.textContent = 'List View'; | |
| } | |
| }); | |
| // Sample JSON data for display | |
| const jsonData = { | |
| "plan_version": "1.0.0", | |
| "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.", | |
| "workflow_structure": [ | |
| { | |
| "step_id": "f7b3c9a0-1d4e-4b8f-8a2c-0d9e4f5b6a7c", | |
| "step_name": "Define Goal", | |
| "role": "TASe", | |
| "task_description": "Clearly articulate and document the overarching objective or mission.", | |
| "status": "Completed" | |
| }, | |
| { | |
| "step_id": "a1b2c3d4-e5f6-7890-1234-567890abcdef", | |
| "step_name": "Deconstruct Objective", | |
| "role": "TASe", | |
| "task_description": "Break down the overarching objective into a sequence of logical, actionable sub-steps or phases.", | |
| "status": "Completed" | |
| }, | |
| { | |
| "step_id": "e9f8a7b6-c5d4-3210-fedc-ba9876543210", | |
| "step_name": "Generalize Steps", | |
| "role": "TASe", | |
| "task_description": "Refine the deconstructed sub-steps to remove domain-specific details, jargon, and concrete examples.", | |
| "status": "Completed" | |
| } | |
| ], | |
| "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.", | |
| "version_history": [ | |
| { | |
| "date": "2023-10-27T12:00:00Z", | |
| "changes": "Initial draft of the Task-Agnostic Plan Framework", | |
| "author": "Lyra" | |
| } | |
| ] | |
| }; | |
| // Function to syntax highlight JSON | |
| function syntaxHighlight(json) { | |
| if (typeof json != 'string') { | |
| json = JSON.stringify(json, undefined, 2); | |
| } | |
| json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'); | |
| return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) { | |
| let cls = 'json-number'; | |
| if (/^"/.test(match)) { | |
| if (/:$/.test(match)) { | |
| cls = 'json-key'; | |
| } else { | |
| cls = 'json-string'; | |
| } | |
| } else if (/true|false/.test(match)) { | |
| cls = 'json-boolean'; | |
| } else if (/null/.test(match)) { | |
| cls = 'json-null'; | |
| } | |
| return '<span class="' + cls + '">' + match + '</span>'; | |
| }); | |
| } | |
| // Display the JSON with syntax highlighting | |
| document.getElementById('json-display').innerHTML = syntaxHighlight(jsonData); | |
| </script> | |
| <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> | |
| </html> |