230 lines
11 KiB
PHP
230 lines
11 KiB
PHP
<?php
|
||
/**
|
||
* Settings Tab: Model Guide
|
||
*
|
||
* @package WP_Agentic_Writer
|
||
*/
|
||
|
||
if ( ! defined( 'ABSPATH' ) ) {
|
||
exit;
|
||
}
|
||
?>
|
||
|
||
<div class="row g-4">
|
||
<!-- How Models Are Used -->
|
||
<div class="col-12">
|
||
<div class="card border-0 shadow-sm">
|
||
<div class="card-header bg-white border-bottom-0 pt-4 pb-0">
|
||
<div class="d-flex align-items-center">
|
||
<span class="me-3 fs-4">📖</span>
|
||
<div>
|
||
<h5 class="card-title mb-1"><?php esc_html_e( 'How AI Models Are Used', 'wp-agentic-writer' ); ?></h5>
|
||
<p class="text-muted small mb-0"><?php esc_html_e( 'Understanding which model handles each task', 'wp-agentic-writer' ); ?></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body p-0">
|
||
<div class="table-responsive">
|
||
<table class="table table-hover mb-0">
|
||
<thead class="table-light">
|
||
<tr>
|
||
<th class="px-3"><?php esc_html_e( 'Task', 'wp-agentic-writer' ); ?></th>
|
||
<th><?php esc_html_e( 'Model Used', 'wp-agentic-writer' ); ?></th>
|
||
<th><?php esc_html_e( 'Est. Cost', 'wp-agentic-writer' ); ?></th>
|
||
<th class="px-3"><?php esc_html_e( 'Description', 'wp-agentic-writer' ); ?></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="px-3 fw-semibold"><?php esc_html_e( 'Planning', 'wp-agentic-writer' ); ?></td>
|
||
<td><span class="badge bg-info-subtle text-info"><?php esc_html_e( 'Planning Model', 'wp-agentic-writer' ); ?></span></td>
|
||
<td class="text-muted">~$0.001</td>
|
||
<td class="px-3 small text-muted"><?php esc_html_e( 'Creates article outline with sections and structure', 'wp-agentic-writer' ); ?></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-3 fw-semibold"><?php esc_html_e( 'Clarity Check', 'wp-agentic-writer' ); ?></td>
|
||
<td><span class="badge bg-secondary-subtle text-secondary"><?php esc_html_e( 'Clarity Model', 'wp-agentic-writer' ); ?></span></td>
|
||
<td class="text-muted">~$0.0005</td>
|
||
<td class="px-3 small text-muted"><?php esc_html_e( 'Analyzes your prompt and asks clarifying questions', 'wp-agentic-writer' ); ?></td>
|
||
</tr>
|
||
<tr class="table-primary">
|
||
<td class="px-3 fw-semibold"><?php esc_html_e( 'Writing', 'wp-agentic-writer' ); ?></td>
|
||
<td><span class="badge bg-primary"><?php esc_html_e( 'Writing Model', 'wp-agentic-writer' ); ?></span></td>
|
||
<td class="text-muted">~$0.05-0.15</td>
|
||
<td class="px-3 small text-muted"><?php esc_html_e( 'Generates full article content section by section', 'wp-agentic-writer' ); ?></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-3 fw-semibold"><?php esc_html_e( 'Chat', 'wp-agentic-writer' ); ?></td>
|
||
<td><span class="badge bg-success-subtle text-success"><?php esc_html_e( 'Chat Model', 'wp-agentic-writer' ); ?></span></td>
|
||
<td class="text-muted">~$0.001</td>
|
||
<td class="px-3 small text-muted"><?php esc_html_e( 'Answers questions and provides quick assistance', 'wp-agentic-writer' ); ?></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-3 fw-semibold"><?php esc_html_e( 'Block Refinement', 'wp-agentic-writer' ); ?></td>
|
||
<td><span class="badge bg-warning-subtle text-warning"><?php esc_html_e( 'Refinement Model', 'wp-agentic-writer' ); ?></span></td>
|
||
<td class="text-muted">~$0.01-0.03</td>
|
||
<td class="px-3 small text-muted"><?php esc_html_e( 'Improves or rewrites selected content blocks', 'wp-agentic-writer' ); ?></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-3 fw-semibold"><?php esc_html_e( 'Web Search', 'wp-agentic-writer' ); ?></td>
|
||
<td><span class="badge bg-dark-subtle text-dark"><?php esc_html_e( 'OpenRouter Plugin', 'wp-agentic-writer' ); ?></span></td>
|
||
<td class="text-muted">~$0.02</td>
|
||
<td class="px-3 small text-muted"><?php esc_html_e( 'Searches web for current information (toggle in sidebar)', 'wp-agentic-writer' ); ?></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-3 fw-semibold"><?php esc_html_e( 'Image Generation', 'wp-agentic-writer' ); ?></td>
|
||
<td><span class="badge bg-danger-subtle text-danger"><?php esc_html_e( 'Image Model', 'wp-agentic-writer' ); ?></span></td>
|
||
<td class="text-muted">$0.003-0.04</td>
|
||
<td class="px-3 small text-muted"><?php esc_html_e( 'Creates images for articles', 'wp-agentic-writer' ); ?></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Recommended Models -->
|
||
<div class="col-12">
|
||
<div class="card border-0 shadow-sm">
|
||
<div class="card-header bg-white border-bottom-0 pt-4 pb-0">
|
||
<div class="d-flex align-items-center">
|
||
<span class="me-3 fs-4">⭐</span>
|
||
<div>
|
||
<h5 class="card-title mb-1"><?php esc_html_e( 'Recommended Models', 'wp-agentic-writer' ); ?></h5>
|
||
<p class="text-muted small mb-0"><?php esc_html_e( 'Best models for each purpose based on quality and cost', 'wp-agentic-writer' ); ?></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body p-0">
|
||
<div class="table-responsive">
|
||
<table class="table table-hover mb-0">
|
||
<thead class="table-light">
|
||
<tr>
|
||
<th class="px-3"><?php esc_html_e( 'Model', 'wp-agentic-writer' ); ?></th>
|
||
<th><?php esc_html_e( 'Best For', 'wp-agentic-writer' ); ?></th>
|
||
<th><?php esc_html_e( 'Cost (per 1M tokens)', 'wp-agentic-writer' ); ?></th>
|
||
<th class="px-3"><?php esc_html_e( 'Notes', 'wp-agentic-writer' ); ?></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="table-success">
|
||
<td class="px-3 fw-semibold">Gemini 2.5 Flash</td>
|
||
<td><?php esc_html_e( 'Chat, Clarity, Planning', 'wp-agentic-writer' ); ?></td>
|
||
<td><code>$0.15 / $0.60</code></td>
|
||
<td class="px-3 small">⭐ <?php esc_html_e( 'Best balanced option. Fast reasoning.', 'wp-agentic-writer' ); ?></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-3 fw-semibold">Gemini 3 Flash Preview</td>
|
||
<td><?php esc_html_e( 'Chat, Clarity, Planning (Premium)', 'wp-agentic-writer' ); ?></td>
|
||
<td><code>$0.50 / $3.00</code></td>
|
||
<td class="px-3 small">🏆 <?php esc_html_e( 'Latest Gemini. Near Pro performance.', 'wp-agentic-writer' ); ?></td>
|
||
</tr>
|
||
<tr class="table-primary">
|
||
<td class="px-3 fw-semibold">Claude 3.5 Sonnet</td>
|
||
<td><?php esc_html_e( 'Writing, Refinement', 'wp-agentic-writer' ); ?></td>
|
||
<td><code>$3.00 / $15.00</code></td>
|
||
<td class="px-3 small">⭐ <?php esc_html_e( 'Best quality writing. Recommended.', 'wp-agentic-writer' ); ?></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-3 fw-semibold">Mistral Small Creative</td>
|
||
<td><?php esc_html_e( 'Writing (Budget)', 'wp-agentic-writer' ); ?></td>
|
||
<td><code>$0.10 / $0.30</code></td>
|
||
<td class="px-3 small">💰 <?php esc_html_e( 'Best budget writing. Creative style.', 'wp-agentic-writer' ); ?></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-3 fw-semibold">GPT-4.1</td>
|
||
<td><?php esc_html_e( 'Writing, Refinement (Premium)', 'wp-agentic-writer' ); ?></td>
|
||
<td><code>$2.00 / $8.00</code></td>
|
||
<td class="px-3 small">🏆 <?php esc_html_e( 'Premium option. Excellent instruction following.', 'wp-agentic-writer' ); ?></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-3 fw-semibold">Claude Sonnet 4</td>
|
||
<td><?php esc_html_e( 'Clarity (Premium)', 'wp-agentic-writer' ); ?></td>
|
||
<td><code>$3.00 / $15.00</code></td>
|
||
<td class="px-3 small">🏆 <?php esc_html_e( 'Latest Claude. Deep analysis.', 'wp-agentic-writer' ); ?></td>
|
||
</tr>
|
||
<tr class="table-warning">
|
||
<td class="px-3 fw-semibold">GPT-4o</td>
|
||
<td><?php esc_html_e( 'Image Prompts', 'wp-agentic-writer' ); ?></td>
|
||
<td><code>$2.50 / $10.00</code></td>
|
||
<td class="px-3 small">⭐ <?php esc_html_e( 'Generates image descriptions for prompts.', 'wp-agentic-writer' ); ?></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Cost Examples -->
|
||
<div class="col-12">
|
||
<div class="card border-0 shadow-sm">
|
||
<div class="card-header bg-white border-bottom-0 pt-4 pb-0">
|
||
<div class="d-flex align-items-center">
|
||
<span class="me-3 fs-4">💡</span>
|
||
<div>
|
||
<h5 class="card-title mb-1"><?php esc_html_e( 'Cost Examples', 'wp-agentic-writer' ); ?></h5>
|
||
<p class="text-muted small mb-0"><?php esc_html_e( 'Real-world cost estimates for common tasks', 'wp-agentic-writer' ); ?></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="row g-3">
|
||
<!-- Single Article -->
|
||
<div class="col-md-4">
|
||
<div class="card h-100 border">
|
||
<div class="card-body">
|
||
<h6 class="card-title"><?php esc_html_e( 'Single Article (Balanced)', 'wp-agentic-writer' ); ?></h6>
|
||
<ul class="list-unstyled small text-muted mb-3">
|
||
<li><?php esc_html_e( 'Clarity Check', 'wp-agentic-writer' ); ?>: ~$0.001</li>
|
||
<li><?php esc_html_e( 'Planning', 'wp-agentic-writer' ); ?>: ~$0.001</li>
|
||
<li><?php esc_html_e( 'Writing (5 sections)', 'wp-agentic-writer' ); ?>: ~$0.10</li>
|
||
<li><?php esc_html_e( '1 Image', 'wp-agentic-writer' ); ?>: ~$0.003</li>
|
||
</ul>
|
||
<div class="d-flex justify-content-between align-items-center border-top pt-2">
|
||
<span class="text-muted"><?php esc_html_e( 'Total', 'wp-agentic-writer' ); ?></span>
|
||
<span class="fs-5 fw-bold text-primary">~$0.10-0.15</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 10 Articles/Month -->
|
||
<div class="col-md-4">
|
||
<div class="card h-100 border">
|
||
<div class="card-body">
|
||
<h6 class="card-title"><?php esc_html_e( '10 Articles/Month (Balanced)', 'wp-agentic-writer' ); ?></h6>
|
||
<ul class="list-unstyled small text-muted mb-3">
|
||
<li><?php esc_html_e( '10 articles × $0.15', 'wp-agentic-writer' ); ?></li>
|
||
<li><?php esc_html_e( 'Some chat interactions', 'wp-agentic-writer' ); ?>: ~$0.05</li>
|
||
<li><?php esc_html_e( 'Refinements', 'wp-agentic-writer' ); ?>: ~$0.20</li>
|
||
</ul>
|
||
<div class="d-flex justify-content-between align-items-center border-top pt-2">
|
||
<span class="text-muted"><?php esc_html_e( 'Total', 'wp-agentic-writer' ); ?></span>
|
||
<span class="fs-5 fw-bold text-primary">~$1.50-2.00</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- With Web Search -->
|
||
<div class="col-md-4">
|
||
<div class="card h-100 border">
|
||
<div class="card-body">
|
||
<h6 class="card-title"><?php esc_html_e( 'With Web Search', 'wp-agentic-writer' ); ?></h6>
|
||
<ul class="list-unstyled small text-muted mb-3">
|
||
<li><?php esc_html_e( 'Add ~$0.02 per search request', 'wp-agentic-writer' ); ?></li>
|
||
<li><?php esc_html_e( 'Typical: 1-2 searches per article', 'wp-agentic-writer' ); ?></li>
|
||
</ul>
|
||
<div class="d-flex justify-content-between align-items-center border-top pt-2">
|
||
<span class="text-muted"><?php esc_html_e( 'Extra', 'wp-agentic-writer' ); ?></span>
|
||
<span class="fs-5 fw-bold text-warning">~$0.02-0.04</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|