Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SFL Prompt Engineering Studio</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .metafunction-card { | |
| transition: all 0.3s ease; | |
| } | |
| .metafunction-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .register-variable { | |
| transition: all 0.2s ease; | |
| } | |
| .register-variable.active { | |
| border-left: 4px solid; | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .prompt-component { | |
| transition: all 0.2s ease; | |
| } | |
| .prompt-component:hover { | |
| transform: scale(1.02); | |
| } | |
| .response-card { | |
| max-height: 400px; | |
| overflow-y: auto; | |
| } | |
| .template-card { | |
| transition: all 0.2s ease; | |
| } | |
| .template-card:hover { | |
| transform: translateY(-2px); | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.3s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .draggable-component { | |
| cursor: grab; | |
| user-select: none; | |
| } | |
| .draggable-component:active { | |
| cursor: grabbing; | |
| } | |
| .drop-zone { | |
| min-height: 100px; | |
| border: 2px dashed rgba(255, 255, 255, 0.3); | |
| transition: all 0.3s ease; | |
| } | |
| .drop-zone.active { | |
| border-color: #3b82f6; | |
| background-color: rgba(59, 130, 246, 0.1); | |
| } | |
| .syntax-tree { | |
| font-family: 'Courier New', monospace; | |
| } | |
| .token-tag { | |
| display: inline-block; | |
| padding: 0.1rem 0.3rem; | |
| border-radius: 0.25rem; | |
| font-size: 0.75rem; | |
| margin-right: 0.2rem; | |
| } | |
| .highlight-ideational { | |
| background-color: rgba(59, 130, 246, 0.2); | |
| border-left: 3px solid #3b82f6; | |
| padding-left: 3px; | |
| } | |
| .highlight-interpersonal { | |
| background-color: rgba(22, 163, 74, 0.2); | |
| border-left: 3px solid #16a34a; | |
| padding-left: 3px; | |
| } | |
| .highlight-textual { | |
| background-color: rgba(124, 58, 237, 0.2); | |
| border-left: 3px solid #7c3aed; | |
| padding-left: 3px; | |
| } | |
| #prompt-preview { | |
| min-height: 100px; | |
| white-space: pre-wrap; | |
| word-wrap: break-word; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Left Sidebar - SFL Concepts --> | |
| <div class="w-64 bg-gray-800 flex flex-col"> | |
| <div class="p-4 border-b border-gray-700"> | |
| <h1 class="text-xl font-bold flex items-center"> | |
| <i class="fas fa-project-diagram mr-2 text-blue-400"></i> SFL Studio | |
| </h1> | |
| <p class="text-sm text-gray-400 mt-1">Systemic Functional Linguistics Prompt Engineering</p> | |
| </div> | |
| <div class="p-4 border-b border-gray-700"> | |
| <h2 class="font-semibold mb-2 flex items-center"> | |
| <i class="fas fa-cube mr-2 text-blue-400"></i> Metafunctions | |
| </h2> | |
| <div class="space-y-3"> | |
| <div class="metafunction-card bg-gray-700 p-3 rounded-lg cursor-pointer" onclick="showMetafunction('ideational')"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center mr-2"> | |
| <i class="fas fa-lightbulb"></i> | |
| </div> | |
| <span>Ideational</span> | |
| </div> | |
| <div class="text-xs text-gray-400 mt-1">How language represents experience</div> | |
| </div> | |
| <div class="metafunction-card bg-gray-700 p-3 rounded-lg cursor-pointer" onclick="showMetafunction('interpersonal')"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center mr-2"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <span>Interpersonal</span> | |
| </div> | |
| <div class="text-xs text-gray-400 mt-1">How language enacts social relationships</div> | |
| </div> | |
| <div class="metafunction-card bg-gray-700 p-3 rounded-lg cursor-pointer" onclick="showMetafunction('textual')"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center mr-2"> | |
| <i class="fas fa-align-left"></i> | |
| </div> | |
| <span>Textual</span> | |
| </div> | |
| <div class="text-xs text-gray-400 mt-1">How language creates coherent messages</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-b border-gray-700"> | |
| <h2 class="font-semibold mb-2 flex items-center"> | |
| <i class="fas fa-sliders-h mr-2 text-blue-400"></i> Register Variables | |
| </h2> | |
| <div class="space-y-2"> | |
| <div class="register-variable p-2 rounded cursor-pointer active" onclick="showRegisterVariable('field')"> | |
| <div class="flex items-center"> | |
| <div class="w-6 h-6 rounded-full bg-yellow-500 flex items-center justify-center mr-2"> | |
| <i class="fas fa-atom text-xs"></i> | |
| </div> | |
| <span>Field</span> | |
| </div> | |
| </div> | |
| <div class="register-variable p-2 rounded cursor-pointer" onclick="showRegisterVariable('tenor')"> | |
| <div class="flex items-center"> | |
| <div class="w-6 h-6 rounded-full bg-pink-500 flex items-center justify-center mr-2"> | |
| <i class="fas fa-user-friends text-xs"></i> | |
| </div> | |
| <span>Tenor</span> | |
| </div> | |
| </div> | |
| <div class="register-variable p-2 rounded cursor-pointer" onclick="showRegisterVariable('mode')"> | |
| <div class="flex items-center"> | |
| <div class="w-6 h-6 rounded-full bg-indigo-500 flex items-center justify-center mr-2"> | |
| <i class="fas fa-comments text-xs"></i> | |
| </div> | |
| <span>Mode</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-b border-gray-700"> | |
| <h2 class="font-semibold mb-2 flex items-center"> | |
| <i class="fas fa-boxes mr-2 text-blue-400"></i> Component Library | |
| </h2> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <div class="prompt-component draggable-component bg-gray-700 p-2 rounded text-xs text-center cursor-move" draggable="true" data-type="process"> | |
| <i class="fas fa-bolt text-yellow-400"></i> Process | |
| </div> | |
| <div class="prompt-component draggable-component bg-gray-700 p-2 rounded text-xs text-center cursor-move" draggable="true" data-type="participant"> | |
| <i class="fas fa-user-tag text-blue-400"></i> Participant | |
| </div> | |
| <div class="prompt-component draggable-component bg-gray-700 p-2 rounded text-xs text-center cursor-move" draggable="true" data-type="circumstance"> | |
| <i class="fas fa-map-marker-alt text-green-400"></i> Circumstance | |
| </div> | |
| <div class="prompt-component draggable-component bg-gray-700 p-2 rounded text-xs text-center cursor-move" draggable="true" data-type="mood"> | |
| <i class="fas fa-comment-dots text-pink-400"></i> Mood | |
| </div> | |
| <div class="prompt-component draggable-component bg-gray-700 p-2 rounded text-xs text-center cursor-move" draggable="true" data-type="modality"> | |
| <i class="fas fa-percentage text-purple-400"></i> Modality | |
| </div> | |
| <div class="prompt-component draggable-component bg-gray-700 p-2 rounded text-xs text-center cursor-move" draggable="true" data-type="theme"> | |
| <i class="fas fa-align-left text-indigo-400"></i> Theme | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 mt-auto"> | |
| <div class="text-xs text-gray-400"> | |
| <div>SFL Prompt Engine v1.0</div> | |
| <div>Connected to LLM API</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Header --> | |
| <div class="bg-gray-800 border-b border-gray-700 p-4"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h2 class="text-xl font-bold">SFL Prompt Engineering Studio</h2> | |
| <div class="text-sm text-gray-400 mt-1"> | |
| Construct LLM prompts using Systemic Functional Linguistics principles | |
| </div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-4 py-2 bg-gray-700 text-gray-300 hover:bg-gray-600 rounded flex items-center"> | |
| <i class="fas fa-user mr-2"></i> Sign In | |
| </button> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 flex items-center"> | |
| <i class="fas fa-book mr-2"></i> Documentation | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tabs --> | |
| <div class="bg-gray-800 border-b border-gray-700"> | |
| <div class="flex"> | |
| <div class="tab px-6 py-3 text-gray-400 hover:text-white font-medium cursor-pointer border-b-2 border-blue-500 text-white"> | |
| <i class="fas fa-pencil-alt mr-2"></i> Prompt Builder | |
| </div> | |
| <div class="tab px-6 py-3 text-gray-400 hover:text-white font-medium cursor-pointer"> | |
| <i class="fas fa-copy mr-2"></i> Templates | |
| </div> | |
| <div class="tab px-6 py-3 text-gray-400 hover:text-white font-medium cursor-pointer"> | |
| <i class="fas fa-history mr-2"></i> History | |
| </div> | |
| <div class="tab px-6 py-3 text-gray-400 hover:text-white font-medium cursor-pointer"> | |
| <i class="fas fa-chart-bar mr-2"></i> Analytics | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Prompt Builder Content --> | |
| <div class="flex-1 overflow-auto p-6"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 h-full"> | |
| <!-- Left Column - SFL Configuration --> | |
| <div class="lg:col-span-1 space-y-6"> | |
| <!-- Field Configuration --> | |
| <div class="bg-gray-800 rounded-lg p-4"> | |
| <h3 class="font-semibold mb-3 flex items-center"> | |
| <i class="fas fa-atom text-yellow-500 mr-2"></i> Field Configuration | |
| <span class="ml-auto text-xs bg-gray-700 text-gray-400 px-2 py-1 rounded">Ideational</span> | |
| </h3> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Domain/Subject Matter</label> | |
| <select class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-sm" id="domain-select" onchange="updatePromptPreview()"> | |
| <option>Technical (IT/Engineering)</option> | |
| <option>Academic (Humanities)</option> | |
| <option>Business/Finance</option> | |
| <option>Creative Writing</option> | |
| <option>Medical/Scientific</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Process Types</label> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500" checked onchange="updatePromptPreview()"> | |
| <span class="ml-2 text-sm">Material</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500" onchange="updatePromptPreview()"> | |
| <span class="ml-2 text-sm">Mental</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500" checked onchange="updatePromptPreview()"> | |
| <span class="ml-2 text-sm">Relational</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500" onchange="updatePromptPreview()"> | |
| <span class="ml-2 text-sm">Verbal</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Lexical Density</label> | |
| <input type="range" min="1" max="5" value="3" class="w-full" id="lexical-density" oninput="updatePromptPreview()"> | |
| <div class="flex justify-between text-xs text-gray-400 mt-1"> | |
| <span>Low</span> | |
| <span>Medium</span> | |
| <span>High</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tenor Configuration --> | |
| <div class="bg-gray-800 rounded-lg p-4"> | |
| <h3 class="font-semibold mb-3 flex items-center"> | |
| <i class="fas fa-user-friends text-pink-500 mr-2"></i> Tenor Configuration | |
| <span class="ml-auto text-xs bg-gray-700 text-gray-400 px-2 py-1 rounded">Interpersonal</span> | |
| </h3> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Social Relationship</label> | |
| <select class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-sm" id="social-relationship" onchange="updatePromptPreview()"> | |
| <option>Expert to Expert</option> | |
| <option>Expert to Novice</option> | |
| <option>Peer to Peer</option> | |
| <option>Novice to Expert</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Power Distance</label> | |
| <input type="range" min="1" max="5" value="2" class="w-full" id="power-distance" oninput="updatePromptPreview()"> | |
| <div class="flex justify-between text-xs text-gray-400 mt-1"> | |
| <span>Low</span> | |
| <span>Medium</span> | |
| <span>High</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Mood</label> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <label class="flex items-center"> | |
| <input type="radio" name="mood" class="form-radio h-4 w-4 text-blue-500" checked onchange="updatePromptPreview()"> | |
| <span class="ml-2 text-sm">Declarative</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="radio" name="mood" class="form-radio h-4 w-4 text-blue-500" onchange="updatePromptPreview()"> | |
| <span class="ml-2 text-sm">Interrogative</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="radio" name="mood" class="form-radio h-4 w-4 text-blue-500" onchange="updatePromptPreview()"> | |
| <span class="ml-2 text-sm">Imperative</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="radio" name="mood" class="form-radio h-4 w-4 text-blue-500" onchange="updatePromptPreview()"> | |
| <span class="ml-2 text-sm">Exclamative</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Modality</label> | |
| <select class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-sm" id="modality" onchange="updatePromptPreview()"> | |
| <option>High certainty</option> | |
| <option selected>Medium certainty</option> | |
| <option>Low certainty</option> | |
| <option>Conditional</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mode Configuration --> | |
| <div class="bg-gray-800 rounded-lg p-4"> | |
| <h3 class="font-semibold mb-3 flex items-center"> | |
| <i class="fas fa-comments text-indigo-500 mr-2"></i> Mode Configuration | |
| <span class="ml-auto text-xs bg-gray-700 text-gray-400 px-2 py-1 rounded">Textual</span> | |
| </h3> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Channel</label> | |
| <select class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-sm" id="channel" onchange="updatePromptPreview()"> | |
| <option>Written</option> | |
| <option>Spoken</option> | |
| <option>Mixed</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Cohesion Devices</label> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500" checked onchange="updatePromptPreview()"> | |
| <span class="ml-2 text-sm">Reference</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500" checked onchange="updatePromptPreview()"> | |
| <span class="ml-2 text-sm">Conjunction</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500" onchange="updatePromptPreview()"> | |
| <span class="ml-2 text-sm">Ellipsis</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500" checked onchange="updatePromptPreview()"> | |
| <span class="ml-2 text-sm">Lexical Chains</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Theme Selection</label> | |
| <select class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-sm" id="theme-selection" onchange="updatePromptPreview()"> | |
| <option>Unmarked (default)</option> | |
| <option>Marked (emphasis)</option> | |
| <option>Multiple Themes</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Information Structure</label> | |
| <select class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-sm" id="info-structure" onchange="updatePromptPreview()"> | |
| <option>Given → New</option> | |
| <option selected>Theme → Rheme</option> | |
| <option>Topic → Comment</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Middle Column - Prompt Construction --> | |
| <div class="lg:col-span-1"> | |
| <div class="bg-gray-800 rounded-lg p-4 h-full flex flex-col"> | |
| <h3 class="font-semibold mb-3 flex items-center"> | |
| <i class="fas fa-code text-green-500 mr-2"></i> Prompt Construction | |
| <span class="ml-auto text-xs bg-gray-700 text-gray-400 px-2 py-1 rounded">Interactive Builder</span> | |
| </h3> | |
| <div class="flex-1 flex flex-col"> | |
| <!-- Prompt Preview with Metafunction Highlights --> | |
| <div class="bg-gray-900 rounded-lg p-3 mb-4"> | |
| <h4 class="text-sm font-medium mb-2 flex items-center"> | |
| <i class="fas fa-eye text-blue-400 mr-2"></i> Prompt Preview | |
| </h4> | |
| <div id="prompt-preview" class="text-sm p-2 rounded bg-gray-800"> | |
| <span class="highlight-ideational">Analyze</span> the <span class="highlight-ideational">database connection issues</span> | |
| <span class="highlight-ideational">during peak hours</span> and <span class="highlight-interpersonal">provide a detailed technical explanation</span> | |
| with <span class="highlight-textual">clear organization</span> and <span class="highlight-textual">appropriate cohesive devices</span>. | |
| </div> | |
| </div> | |
| <!-- Text Editor --> | |
| <div class="mb-4"> | |
| <label class="block text-sm text-gray-400 mb-1">Prompt Text</label> | |
| <textarea class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-sm h-32" id="prompt-text" oninput="updatePromptPreview()" placeholder="Type your prompt here or use the SFL components above..."></textarea> | |
| </div> | |
| <!-- Syntax Analysis --> | |
| <div class="bg-gray-900 rounded-lg p-3"> | |
| <h4 class="text-sm font-medium mb-2 flex items-center"> | |
| <i class="fas fa-diagram-project text-purple-400 mr-2"></i> SFL Syntax Analysis | |
| </h4> | |
| <div class="syntax-tree text-xs bg-gray-800 p-2 rounded overflow-x-auto"> | |
| <div class="text-gray-400">[Ideational]</div> | |
| <div class="ml-4"> | |
| <span class="token-tag bg-yellow-900 text-yellow-200">Process:</span> | |
| <span class="token-tag bg-yellow-800 text-yellow-100">analyze</span> | |
| </div> | |
| <div class="ml-4"> | |
| <span class="token-tag bg-blue-900 text-blue-200">Participant:</span> | |
| <span class="token-tag bg-blue-800 text-blue-100">database connection issues</span> | |
| </div> | |
| <div class="ml-4"> | |
| <span class="token-tag bg-green-900 text-green-200">Circumstance:</span> | |
| <span class="token-tag bg-green-800 text-green-100">during peak hours</span> | |
| </div> | |
| <div class="mt-2 text-gray-400">[Interpersonal]</div> | |
| <div class="ml-4"> | |
| <span class="token-tag bg-pink-900 text-pink-200">Mood:</span> | |
| <span class="token-tag bg-pink-800 text-pink-100">declarative</span> | |
| </div> | |
| <div class="ml-4"> | |
| <span class="token-tag bg-purple-900 text-purple-200">Modality:</span> | |
| <span class="token-tag bg-purple-800 text-purple-100">high certainty</span> | |
| </div> | |
| <div class="mt-2 text-gray-400">[Textual]</div> | |
| <div class="ml-4"> | |
| <span class="token-tag bg-indigo-900 text-indigo-200">Theme:</span> | |
| <span class="token-tag bg-indigo-800 text-indigo-100">database issues</span> | |
| </div> | |
| <div class="ml-4"> | |
| <span class="token-tag bg-gray-600 text-gray-200">Cohesion:</span> | |
| <span class="token-tag bg-gray-500 text-gray-100">lexical chains</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column - LLM Interaction --> | |
| <div class="lg:col-span-1 space-y-6"> | |
| <!-- Model Configuration --> | |
| <div class="bg-gray-800 rounded-lg p-4"> | |
| <h3 class="font-semibold mb-3 flex items-center"> | |
| <i class="fas fa-robot text-blue-400 mr-2"></i> LLM Configuration | |
| </h3> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Model</label> | |
| <select class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-sm"> | |
| <option>GPT-4</option> | |
| <option>GPT-3.5 Turbo</option> | |
| <option>Claude 2</option> | |
| <option>Llama 2</option> | |
| <option>PaLM 2</option> | |
| </select> | |
| </div> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Temperature</label> | |
| <input type="range" min="0" max="20" value="7" class="w-full"> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Max Tokens</label> | |
| <input type="number" value="1000" class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-sm"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-400 mb-1">Output Format</label> | |
| <select class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-sm"> | |
| <option>Plain Text</option> | |
| <option>Markdown</option> | |
| <option>JSON</option> | |
| <option>HTML</option> | |
| <option>XML</option> | |
| </select> | |
| </div> | |
| <div class="flex justify-between space-x-2 pt-2"> | |
| <button class="flex-1 px-4 py-2 bg-gray-700 text-gray-300 hover:bg-gray-600 rounded flex items-center justify-center"> | |
| <i class="fas fa-save mr-2"></i> Save | |
| </button> | |
| <button class="flex-1 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 flex items-center justify-center" onclick="sendToLLM()"> | |
| <i class="fas fa-paper-plane mr-2"></i> Send | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Response Display --> | |
| <div class="bg-gray-800 rounded-lg p-4 flex-1"> | |
| <h3 class="font-semibold mb-3 flex items-center"> | |
| <i class="fas fa-reply text-green-400 mr-2"></i> LLM Response | |
| </h3> | |
| <div class="response-card bg-gray-900 rounded-lg p-3"> | |
| <div class="text-sm text-gray-400 mb-2">Response will appear here...</div> | |
| <div id="llm-response" class="hidden"> | |
| <div class="text-sm mb-4"> | |
| <p>Based on the SFL analysis of your prompt about database connection issues during peak hours, here's a comprehensive response:</p> | |
| <div class="mt-3 p-3 bg-gray-800 rounded"> | |
| <h4 class="font-medium text-blue-300">Technical Analysis</h4> | |
| <p class="mt-1">The connection pool exhaustion you're experiencing is a common issue in high-traffic environments. The material processes in your description ("exhausted", "timed out") suggest active resource contention.</p> | |
| <h4 class="font-medium text-blue-300 mt-3">Recommended Solutions</h4> | |
| <ol class="list-decimal ml-5 space-y-1 mt-1"> | |
| <li>Increase the maximum pool size parameter in your configuration</li> | |
| <li>Implement connection validation and retry logic</li> | |
| <li>Consider implementing a connection pool warmer for peak periods</li> | |
| </ol> | |
| <h4 class="font-medium text-blue-300 mt-3">Configuration Example</h4> | |
| <pre class="bg-gray-700 p-2 rounded text-xs mt-1 overflow-x-auto"> | |
| <code># Database connection pool settings | |
| maxPoolSize: 50 | |
| minPoolSize: 10 | |
| validationQuery: "SELECT 1" | |
| testOnBorrow: true | |
| testWhileIdle: true</code></pre> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <h4 class="text-sm font-medium mb-2 flex items-center"> | |
| <i class="fas fa-chart-line text-yellow-400 mr-2"></i> Response Metrics | |
| </h4> | |
| <div class="grid grid-cols-3 gap-2 text-xs"> | |
| <div class="bg-gray-700 p-2 rounded text-center"> | |
| <div class="text-gray-400">Tokens Used</div> | |
| <div class="font-mono">427</div> | |
| </div> | |
| <div class="bg-gray-700 p-2 rounded text-center"> | |
| <div class="text-gray-400">Latency</div> | |
| <div class="font-mono">1.23s</div> | |
| </div> | |
| <div class="bg-gray-700 p-2 rounded text-center"> | |
| <div class="text-gray-400">Cost</div> | |
| <div class="font-mono">$0.012</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Tab switching | |
| document.querySelectorAll('.tab').forEach((tab, index) => { | |
| tab.addEventListener('click', () => { | |
| // Update tab styling | |
| document.querySelectorAll('.tab').forEach(t => { | |
| t.classList.remove('border-b-2', 'border-blue-500', 'text-white'); | |
| t.classList.add('text-gray-400'); | |
| }); | |
| tab.classList.add('border-b-2', 'border-blue-500', 'text-white'); | |
| tab.classList.remove('text-gray-400'); | |
| }); | |
| }); | |
| // Show metafunction details | |
| function showMetafunction(metafunction) { | |
| console.log(`Showing ${metafunction} metafunction details`); | |
| // In a full implementation, this would update the main content area | |
| } | |
| // Show register variable details | |
| function showRegisterVariable(variable) { | |
| console.log(`Showing ${variable} register variable details`); | |
| document.querySelectorAll('.register-variable').forEach(el => { | |
| el.classList.remove('active'); | |
| }); | |
| event.currentTarget.classList.add('active'); | |
| } | |
| // Drag and drop functionality | |
| const draggables = document.querySelectorAll('.draggable-component'); | |
| const dropZone = document.getElementById('prompt-drop-zone'); | |
| draggables.forEach(draggable => { | |
| draggable.addEventListener('dragstart', () => { | |
| draggable.classList.add('opacity-50'); | |
| event.dataTransfer.setData('text/plain', draggable.dataset.type); | |
| }); | |
| draggable.addEventListener('dragend', () => { | |
| draggable.classList.remove('opacity-50'); | |
| }); | |
| }); | |
| dropZone.addEventListener('dragover', e => { | |
| e.preventDefault(); | |
| dropZone.classList.add('active'); | |
| }); | |
| dropZone.addEventListener('dragleave', () => { | |
| dropZone.classList.remove('active'); | |
| }); | |
| dropZone.addEventListener('drop', e => { | |
| e.preventDefault(); | |
| dropZone.classList.remove('active'); | |
| const componentType = e.dataTransfer.getData('text/plain'); | |
| addComponentToPrompt(componentType); | |
| }); | |
| function addComponentToPrompt(type) { | |
| const promptComponents = document.getElementById('prompt-components'); | |
| const emptyMessage = document.getElementById('empty-prompt-message'); | |
| if (promptComponents.classList.contains('hidden')) { | |
| promptComponents.classList.remove('hidden'); | |
| emptyMessage.classList.add('hidden'); | |
| } | |
| const component = document.createElement('div'); | |
| component.className = 'prompt-component bg-gray-700 p-2 rounded flex items-center justify-between'; | |
| let icon, label; | |
| switch(type) { | |
| case 'process': | |
| icon = 'fa-bolt text-yellow-400'; | |
| label = 'Process'; | |
| break; | |
| case 'participant': | |
| icon = 'fa-user-tag text-blue-400'; | |
| label = 'Participant'; | |
| break; | |
| case 'circumstance': | |
| icon = 'fa-map-marker-alt text-green-400'; | |
| label = 'Circumstance'; | |
| break; | |
| case 'mood': | |
| icon = 'fa-comment-dots text-pink-400'; | |
| label = 'Mood'; | |
| break; | |
| case 'modality': | |
| icon = 'fa-percentage text-purple-400'; | |
| label = 'Modality'; | |
| break; | |
| case 'theme': | |
| icon = 'fa-align-left text-indigo-400'; | |
| label = 'Theme'; | |
| break; | |
| } | |
| component.innerHTML = ` | |
| <div class="flex items-center"> | |
| <i class="fas ${icon} mr-2"></i> | |
| <span>${label}</span> | |
| </div> | |
| <button class="text-gray-400 hover:text-white" onclick="this.parentElement.remove(); checkPromptEmpty()"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| `; | |
| promptComponents.appendChild(component); | |
| updatePromptPreview(); | |
| } | |
| function checkPromptEmpty() { | |
| const promptComponents = document.getElementById('prompt-components'); | |
| if (promptComponents.children.length === 0) { | |
| promptComponents.classList.add('hidden'); | |
| document.getElementById('empty-prompt-message').classList.remove('hidden'); | |
| } | |
| updatePromptPreview(); | |
| } | |
| // Update prompt preview with metafunction highlights | |
| function updatePromptPreview() { | |
| const promptText = document.getElementById('prompt-text').value || | |
| "Analyze the database connection issues during peak hours and provide a detailed technical explanation with clear organization and appropriate cohesive devices."; | |
| // Get current configuration values | |
| const domain = document.getElementById('domain-select').value; | |
| const socialRelationship = document.getElementById('social-relationship').value; | |
| const channel = document.getElementById('channel').value; | |
| // Process the text to add highlights based on configuration | |
| let highlightedText = promptText; | |
| // Apply ideational highlights (blue) | |
| highlightedText = highlightedText.replace(/(analyze|database connection issues|during peak hours)/gi, | |
| '<span class="highlight-ideational">$1</span>'); | |
| // Apply interpersonal highlights (green) | |
| highlightedText = highlightedText.replace(/(provide a detailed technical explanation)/gi, | |
| '<span class="highlight-interpersonal">$1</span>'); | |
| // Apply textual highlights (purple) | |
| highlightedText = highlightedText.replace(/(clear organization|appropriate cohesive devices)/gi, | |
| '<span class="highlight-textual">$1</span>'); | |
| // Update the preview | |
| document.getElementById('prompt-preview').innerHTML = highlightedText; | |
| // Update syntax analysis based on configuration | |
| updateSyntaxAnalysis(); | |
| } | |
| // Update syntax analysis display | |
| function updateSyntaxAnalysis() { | |
| // This would be more sophisticated in a real implementation | |
| const domain = document.getElementById('domain-select').value; | |
| const socialRelationship = document.getElementById('social-relationship').value; | |
| const channel = document.getElementById('channel').value; | |
| // Update process types based on checkboxes | |
| let processTypes = []; | |
| if (document.querySelector('input[type="checkbox"]:checked')) { | |
| if (document.querySelectorAll('input[type="checkbox"]')[0].checked) processTypes.push("Material"); | |
| if (document.querySelectorAll('input[type="checkbox"]')[1].checked) processTypes.push("Mental"); | |
| if (document.querySelectorAll('input[type="checkbox"]')[2].checked) processTypes.push("Relational"); | |
| if (document.querySelectorAll('input[type="checkbox"]')[3].checked) processTypes.push("Verbal"); | |
| } | |
| // Update mood based on radio selection | |
| let mood = "Declarative"; | |
| document.querySelectorAll('input[name="mood"]').forEach(radio => { | |
| if (radio.checked) { | |
| mood = radio.nextElementSibling.textContent; | |
| } | |
| }); | |
| // Update modality | |
| const modality = document.getElementById('modality').value; | |
| // In a full implementation, this would do actual linguistic analysis | |
| // For now, we'll just update some example values | |
| document.querySelector('.syntax-tree').innerHTML = ` | |
| <div class="text-gray-400">[Ideational]</div> | |
| <div class="ml-4"> | |
| <span class="token-tag bg-yellow-900 text-yellow-200">Process:</span> | |
| <span class="token-tag bg-yellow-800 text-yellow-100">analyze</span> | |
| </div> | |
| <div class="ml-4"> | |
| <span class="token-tag bg-blue-900 text-blue-200">Participant:</span> | |
| <span class="token-tag bg-blue-800 text-blue-100">database connection issues</span> | |
| </div> | |
| <div class="ml-4"> | |
| <span class="token-tag bg-green-900 text-green-200">Circumstance:</span> | |
| <span class="token-tag bg-green-800 text-green-100">during peak hours</span> | |
| </div> | |
| <div class="mt-2 text-gray-400">[Interpersonal]</div> | |
| <div class="ml-4"> | |
| <span class="token-tag bg-pink-900 text-pink-200">Mood:</span> | |
| <span class="token-tag bg-pink-800 text-pink-100">${mood.toLowerCase()}</span> | |
| </div> | |
| <div class="ml-4"> | |
| <span class="token-tag bg-purple-900 text-purple-200">Modality:</span> | |
| <span class="token-tag bg-purple-800 text-purple-100">${modality.toLowerCase()}</span> | |
| </div> | |
| <div class="mt-2 text-gray-400">[Textual]</div> | |
| <div class="ml-4"> | |
| <span class="token-tag bg-indigo-900 text-indigo-200">Theme:</span> | |
| <span class="token-tag bg-indigo-800 text-indigo-100">database issues</span> | |
| </div> | |
| <div class="ml-4"> | |
| <span class="token-tag bg-gray-600 text-gray-200">Cohesion:</span> | |
| <span class="token-tag bg-gray-500 text-gray-100">lexical chains</span> | |
| </div> | |
| `; | |
| } | |
| // Send prompt to LLM | |
| function sendToLLM() { | |
| const responseElement = document.getElementById('llm-response'); | |
| const responseContainer = document.querySelector('.response-card'); | |
| // Show loading state | |
| responseContainer.innerHTML = ` | |
| <div class="flex items-center justify-center h-full"> | |
| <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div> | |
| <span class="ml-3">Generating response...</span> | |
| </div> | |
| `; | |
| // Simulate API call delay | |
| setTimeout(() => { | |
| responseContainer.innerHTML = ` | |
| <div class="text-sm mb-4"> | |
| <p>Based on the SFL analysis of your prompt about database connection issues during peak hours, here's a comprehensive response:</p> | |
| <div class="mt-3 p-3 bg-gray-800 rounded"> | |
| <h4 class="font-medium text-blue-300">Technical Analysis</h4> | |
| <p class="mt-1">The connection pool exhaustion you're experiencing is a common issue in high-traffic environments. The material processes in your description ("exhausted", "timed out") suggest active resource contention.</p> | |
| <h4 class="font-medium text-blue-300 mt-3">Recommended Solutions</h4> | |
| <ol class="list-decimal ml-5 space-y-1 mt-1"> | |
| <li>Increase the maximum pool size parameter in your configuration</li> | |
| <li>Implement connection validation and retry logic</li> | |
| <li>Consider implementing a connection pool warmer for peak periods</li> | |
| </ol> | |
| <h4 class="font-medium text-blue-300 mt-3">Configuration Example</h4> | |
| <pre class="bg-gray-700 p-2 rounded text-xs mt-1 overflow-x-auto"> | |
| <code># Database connection pool settings | |
| maxPoolSize: 50 | |
| minPoolSize: 10 | |
| validationQuery: "SELECT 1" | |
| testOnBorrow: true | |
| testWhileIdle: true</code></pre> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <h4 class="text-sm font-medium mb-2 flex items-center"> | |
| <i class="fas fa-chart-line text-yellow-400 mr-2"></i> Response Metrics | |
| </h4> | |
| <div class="grid grid-cols-3 gap-2 text-xs"> | |
| <div class="bg-gray-700 p-2 rounded text-center"> | |
| <div class="text-gray-400">Tokens Used</div> | |
| <div class="font-mono">427</div> | |
| </div> | |
| <div class="bg-gray-700 p-2 rounded text-center"> | |
| <div class="text-gray-400">Latency</div> | |
| <div class="font-mono">1.23s</div> | |
| </div> | |
| <div class="bg-gray-700 p-2 rounded text-center"> | |
| <div class="text-gray-400">Cost</div> | |
| <div class="font-mono">$0.012</div> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| }, 2000); | |
| } | |
| // Initialize the preview | |
| document.addEventListener('DOMContentLoaded', function() { | |
| updatePromptPreview(); | |
| }); | |
| </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=b08x/sfl-pe-studio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |