117 lines
4.9 KiB
HTML
117 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="description" content="PromptMutator — desktop prompt mutation workbench built with Tauri, Rust, and PettyUI." />
|
|
<title>PromptMutator</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
|
<script type="module" src="./src/main.ts"></script>
|
|
<link rel="stylesheet" href="./style.css" />
|
|
</head>
|
|
<body>
|
|
<main class="app-shell">
|
|
<section class="hero-panel surface">
|
|
<div>
|
|
<p class="eyebrow">Prompt mutation workbench</p>
|
|
<h1>PromptMutator</h1>
|
|
<p class="lede">Generate provider-aware prompt variants, inspect the mutation logic, and refine prompts for OpenAI, Anthropic, Google, Groq, Mistral, and local models.</p>
|
|
</div>
|
|
<div class="hero-stats">
|
|
<div class="stat-card">
|
|
<span class="stat-label">Providers</span>
|
|
<strong id="provider-count">6</strong>
|
|
</div>
|
|
<div class="stat-card">
|
|
<span class="stat-label">Strategies</span>
|
|
<strong id="strategy-count">0</strong>
|
|
</div>
|
|
<div class="stat-card accent">
|
|
<span class="stat-label">Engine</span>
|
|
<strong>Rust + Tauri</strong>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="workspace-grid">
|
|
<div class="surface control-panel">
|
|
<div class="section-header">
|
|
<div>
|
|
<p class="section-kicker">Input</p>
|
|
<h2>Base prompt</h2>
|
|
</div>
|
|
<petty-badge variant="success">Local-first</petty-badge>
|
|
</div>
|
|
|
|
<petty-text-field class="field-group">
|
|
<label data-part="label" for="task-input">Task</label>
|
|
<input id="task-input" data-part="control" type="text" placeholder="e.g. Write a policy-safe, concise product announcement" />
|
|
<p data-part="description">Short task summary used to frame mutations.</p>
|
|
</petty-text-field>
|
|
|
|
<label class="textarea-label" for="prompt-input">Prompt</label>
|
|
<textarea id="prompt-input" class="prompt-editor" spellcheck="false" placeholder="Paste or write the prompt you want to improve."></textarea>
|
|
|
|
<div class="config-grid">
|
|
<div>
|
|
<label class="select-label" for="provider-select">Provider</label>
|
|
<petty-select id="provider-select" placeholder="Choose provider">
|
|
<button type="button" data-part="trigger">Anthropic</button>
|
|
<div data-part="listbox" popover role="listbox">
|
|
<petty-select-option value="anthropic">Anthropic</petty-select-option>
|
|
<petty-select-option value="openai">OpenAI</petty-select-option>
|
|
<petty-select-option value="google">Google</petty-select-option>
|
|
<petty-select-option value="groq">Groq</petty-select-option>
|
|
<petty-select-option value="mistral">Mistral</petty-select-option>
|
|
<petty-select-option value="local">Local / Ollama</petty-select-option>
|
|
</div>
|
|
<input type="hidden" name="provider" value="anthropic" />
|
|
</petty-select>
|
|
</div>
|
|
|
|
<petty-text-field class="field-group">
|
|
<label data-part="label" for="model-input">Model</label>
|
|
<input id="model-input" data-part="control" type="text" value="claude-3-7-sonnet" />
|
|
<p data-part="description">Optional target model identifier.</p>
|
|
</petty-text-field>
|
|
</div>
|
|
|
|
<div class="actions-row">
|
|
<petty-button id="generate-btn"><button type="button">Generate mutations</button></petty-button>
|
|
<petty-button id="sample-btn"><button type="button">Load sample</button></petty-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="surface strategy-panel">
|
|
<div class="section-header">
|
|
<div>
|
|
<p class="section-kicker">Mutation logic</p>
|
|
<h2>Strategies</h2>
|
|
</div>
|
|
<petty-badge id="selected-strategy-count">0 selected</petty-badge>
|
|
</div>
|
|
<div id="strategy-list" class="strategy-list"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="surface output-panel">
|
|
<div class="section-header output-header">
|
|
<div>
|
|
<p class="section-kicker">Output</p>
|
|
<h2>Mutated prompts</h2>
|
|
</div>
|
|
<div class="toolbar">
|
|
<petty-badge id="result-count">0 variants</petty-badge>
|
|
<petty-button id="copy-best-btn"><button type="button">Copy best</button></petty-button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="summary-strip" class="summary-strip"></div>
|
|
<div id="results-grid" class="results-grid"></div>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|