Add AI writing assistant plugin with local backend, brave search, and image generation support
- Implement local backend AI provider with Ollama integration - Add Brave Search API integration for real-time search suggestions - Add image generation manager with multiple AI providers - Create hybrid provider system with local/cloud fallback - Add comprehensive settings UI with provider management - Implement Gutenberg sidebar with writing assistance controls - Add SEO schema generation for AI-generated content - Multiple provider support: OpenRouter, local backend, Codex
This commit is contained in:
Dwindi Ramadhana
143
views/settings-backup/layout.php
Normal file
143
views/settings-backup/layout.php
Normal file
@@ -0,0 +1,143 @@
|
||||
<?php
|
||||
/**
|
||||
* Settings Layout - Bootstrap 5 wrapper
|
||||
*
|
||||
* @package WP_Agentic_Writer
|
||||
* @var array $view_data Prepared view data from class-settings-v2.php
|
||||
*/
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
// Extract view data for easier access
|
||||
extract( $view_data );
|
||||
?>
|
||||
<div class="wrap wpaw-settings-v2-wrap">
|
||||
<div class="container py-4">
|
||||
<!-- Header -->
|
||||
<div class="wpaw-agentic-header mb-4">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<img src="<?php echo esc_url( WP_AGENTIC_WRITER_URL . 'assets/img/icon.svg' ); ?>"
|
||||
alt="WP Agentic Writer"
|
||||
style="width: 48px; height: 48px; filter: invert(1)">
|
||||
<div>
|
||||
<h1 class="h3 mb-1"><?php esc_html_e( 'WP Agentic Writer', 'wp-agentic-writer' ); ?></h1>
|
||||
<p class="text-muted mb-0">
|
||||
v<?php echo esc_html( WP_AGENTIC_WRITER_VERSION ); ?> ·
|
||||
<?php esc_html_e( 'Settings & Configuration', 'wp-agentic-writer' ); ?>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab Navigation -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<ul class="nav nav-pills nav-fill gap-2 p-2" id="wpaw-settings-tabs" role="tablist">
|
||||
<li class="nav-item mb-0" role="presentation">
|
||||
<button class="nav-link active d-flex align-items-center justify-content-center gap-2" id="general-tab" data-bs-toggle="pill" data-bs-target="#general" type="button" role="tab" aria-controls="general" aria-selected="true">
|
||||
<i class="bi bi-sliders"></i>
|
||||
<?php esc_html_e( 'General', 'wp-agentic-writer' ); ?>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item mb-0" role="presentation">
|
||||
<button class="nav-link d-flex align-items-center justify-content-center gap-2" id="models-tab" data-bs-toggle="pill" data-bs-target="#models" type="button" role="tab" aria-controls="models" aria-selected="false">
|
||||
<i class="bi bi-stars"></i>
|
||||
<?php esc_html_e( 'AI Models', 'wp-agentic-writer' ); ?>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item mb-0" role="presentation">
|
||||
<button class="nav-link d-flex align-items-center justify-content-center gap-2" id="local-backend-tab" data-bs-toggle="pill" data-bs-target="#local-backend" type="button" role="tab" aria-controls="local-backend" aria-selected="false">
|
||||
<i class="bi bi-house-fill"></i>
|
||||
<?php esc_html_e( 'Local Backend', 'wp-agentic-writer' ); ?>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item mb-0" role="presentation">
|
||||
<button class="nav-link d-flex align-items-center justify-content-center gap-2" id="cost-log-tab" data-bs-toggle="pill" data-bs-target="#cost-log" type="button" role="tab" aria-controls="cost-log" aria-selected="false">
|
||||
<i class="bi bi-graph-up"></i>
|
||||
<?php esc_html_e( 'Cost Log', 'wp-agentic-writer' ); ?>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item mb-0" role="presentation">
|
||||
<button class="nav-link d-flex align-items-center justify-content-center gap-2" id="guide-tab" data-bs-toggle="pill" data-bs-target="#guide" type="button" role="tab" aria-controls="guide" aria-selected="false">
|
||||
<i class="bi bi-book"></i>
|
||||
<?php esc_html_e( 'Model Guide', 'wp-agentic-writer' ); ?>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Start -->
|
||||
<form method="post" action="options.php" id="wpaw-settings-form">
|
||||
<?php settings_fields( 'wp_agentic_writer_settings' ); ?>
|
||||
|
||||
<!-- Tab Content -->
|
||||
<div class="tab-content" id="wpaw-settings-tab-content">
|
||||
<!-- General Tab -->
|
||||
<div class="tab-pane fade show active" id="general" role="tabpanel" aria-labelledby="general-tab">
|
||||
<?php include WP_AGENTIC_WRITER_DIR . 'views/settings/tab-general.php'; ?>
|
||||
</div>
|
||||
|
||||
<!-- Models Tab -->
|
||||
<div class="tab-pane fade" id="models" role="tabpanel" aria-labelledby="models-tab">
|
||||
<?php include WP_AGENTIC_WRITER_DIR . 'views/settings/tab-models.php'; ?>
|
||||
</div>
|
||||
|
||||
<!-- Local Backend Tab -->
|
||||
<div class="tab-pane fade" id="local-backend" role="tabpanel" aria-labelledby="local-backend-tab">
|
||||
<?php include WP_AGENTIC_WRITER_DIR . 'views/settings/tab-local-backend.php'; ?>
|
||||
</div>
|
||||
|
||||
<!-- Cost Log Tab -->
|
||||
<div class="tab-pane fade" id="cost-log" role="tabpanel" aria-labelledby="cost-log-tab">
|
||||
<?php include WP_AGENTIC_WRITER_DIR . 'views/settings/tab-cost-log.php'; ?>
|
||||
</div>
|
||||
|
||||
<!-- Guide Tab -->
|
||||
<div class="tab-pane fade" id="guide" role="tabpanel" aria-labelledby="guide-tab">
|
||||
<?php include WP_AGENTIC_WRITER_DIR . 'views/settings/tab-guide.php'; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sticky Save Button -->
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body d-flex justify-content-between align-items-center py-3">
|
||||
<div class="text-muted small">
|
||||
<span class="dashicons dashicons-info-outline me-1"></span>
|
||||
<?php esc_html_e( 'Changes are saved immediately after clicking Save.', 'wp-agentic-writer' ); ?>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<button type="button" class="btn btn-outline-secondary" id="wpaw-reset-settings">
|
||||
<span class="dashicons dashicons-image-rotate me-1"></span>
|
||||
<?php esc_html_e( 'Reset to Defaults', 'wp-agentic-writer' ); ?>
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary btn-lg px-4" id="wpaw-save-settings">
|
||||
<span class="dashicons dashicons-saved me-1"></span>
|
||||
<?php esc_html_e( 'Save Settings', 'wp-agentic-writer' ); ?>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toast Container for Notifications -->
|
||||
<div class="toast-container position-fixed bottom-0 end-0 p-3">
|
||||
<div id="wpaw-toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-header">
|
||||
<span class="me-2">✨</span>
|
||||
<strong class="me-auto"><?php esc_html_e( 'WP Agentic Writer', 'wp-agentic-writer' ); ?></strong>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="toast-body" id="wpaw-toast-message"></div>
|
||||
</div>
|
||||
</div>
|
||||
171
views/settings-backup/tab-cost-log.php
Normal file
171
views/settings-backup/tab-cost-log.php
Normal file
@@ -0,0 +1,171 @@
|
||||
<?php
|
||||
/**
|
||||
* Settings Tab: Cost Log
|
||||
*
|
||||
* Uses AJAX for server-side pagination and filtering.
|
||||
*
|
||||
* @package WP_Agentic_Writer
|
||||
*/
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
?>
|
||||
|
||||
<div class="row g-4">
|
||||
<!-- Summary Stats -->
|
||||
<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 Summary', 'wp-agentic-writer' ); ?></h5>
|
||||
<p class="text-muted small mb-0"><?php esc_html_e( 'Overview of your API spending', 'wp-agentic-writer' ); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="p-3 rounded bg-primary bg-opacity-10 text-center">
|
||||
<div class="fs-4 fw-bold text-primary" id="wpaw-stat-all-time">$0.0000</div>
|
||||
<div class="text-muted small"><?php esc_html_e( 'All Time', 'wp-agentic-writer' ); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="p-3 rounded bg-success bg-opacity-10 text-center">
|
||||
<div class="fs-4 fw-bold text-success" id="wpaw-stat-monthly">$0.0000</div>
|
||||
<div class="text-muted small"><?php esc_html_e( 'This Month', 'wp-agentic-writer' ); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="p-3 rounded bg-info bg-opacity-10 text-center">
|
||||
<div class="fs-4 fw-bold text-info" id="wpaw-stat-today">$0.0000</div>
|
||||
<div class="text-muted small"><?php esc_html_e( 'Today', 'wp-agentic-writer' ); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="p-3 rounded bg-warning bg-opacity-10 text-center">
|
||||
<div class="fs-4 fw-bold text-warning" id="wpaw-stat-avg">$0.0000</div>
|
||||
<div class="text-muted small"><?php esc_html_e( 'Avg Per Post', 'wp-agentic-writer' ); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<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( 'Filter Cost Log', 'wp-agentic-writer' ); ?></h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3 align-items-end">
|
||||
<div class="col-md-2">
|
||||
<label for="wpaw-filter-post" class="form-label small"><?php esc_html_e( 'Post ID', 'wp-agentic-writer' ); ?></label>
|
||||
<input type="number" class="form-control form-control-sm" id="wpaw-filter-post" placeholder="<?php esc_attr_e( 'All', 'wp-agentic-writer' ); ?>" />
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label for="wpaw-filter-model" class="form-label small"><?php esc_html_e( 'Model', 'wp-agentic-writer' ); ?></label>
|
||||
<select class="form-select form-select-sm" id="wpaw-filter-model">
|
||||
<option value=""><?php esc_html_e( 'All models', 'wp-agentic-writer' ); ?></option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label for="wpaw-filter-type" class="form-label small"><?php esc_html_e( 'Type', 'wp-agentic-writer' ); ?></label>
|
||||
<select class="form-select form-select-sm" id="wpaw-filter-type">
|
||||
<option value=""><?php esc_html_e( 'All types', 'wp-agentic-writer' ); ?></option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label for="wpaw-filter-date-from" class="form-label small"><?php esc_html_e( 'Date From', 'wp-agentic-writer' ); ?></label>
|
||||
<input type="date" class="form-control form-control-sm" id="wpaw-filter-date-from" />
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label for="wpaw-filter-date-to" class="form-label small"><?php esc_html_e( 'Date To', 'wp-agentic-writer' ); ?></label>
|
||||
<input type="date" class="form-control form-control-sm" id="wpaw-filter-date-to" />
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="d-flex gap-2">
|
||||
<button type="button" class="btn btn-primary btn-sm flex-grow-1" id="wpaw-apply-filters">
|
||||
<span class="dashicons dashicons-filter"></span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm" id="wpaw-clear-filters">
|
||||
<span class="dashicons dashicons-dismiss"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cost Log Table -->
|
||||
<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 justify-content-between">
|
||||
<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( 'Detailed Cost Log', 'wp-agentic-writer' ); ?></h5>
|
||||
<p class="text-muted small mb-0" id="wpaw-records-info"><?php esc_html_e( 'Loading...', 'wp-agentic-writer' ); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline-primary btn-sm" id="wpaw-export-csv">
|
||||
<span class="dashicons dashicons-download me-1"></span>
|
||||
<?php esc_html_e( 'Export CSV', 'wp-agentic-writer' ); ?>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0" id="wpaw-cost-log-table">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th class="px-3" style="width: 50%;"><?php esc_html_e( 'Post Title', 'wp-agentic-writer' ); ?></th>
|
||||
<th class="text-center"><?php esc_html_e( 'API Calls', 'wp-agentic-writer' ); ?></th>
|
||||
<th class="text-end px-3"><?php esc_html_e( 'Total Cost', 'wp-agentic-writer' ); ?></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="wpaw-cost-log-tbody">
|
||||
<tr>
|
||||
<td colspan="3" class="text-center py-5">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden"><?php esc_html_e( 'Loading...', 'wp-agentic-writer' ); ?></span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="d-flex justify-content-between align-items-center p-3 border-top" id="wpaw-pagination-wrapper">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<label for="wpaw-per-page" class="form-label mb-0 small"><?php esc_html_e( 'Per page:', 'wp-agentic-writer' ); ?></label>
|
||||
<select class="form-select form-select-sm" id="wpaw-per-page" style="width: auto;">
|
||||
<option value="10">10</option>
|
||||
<option value="25" selected>25</option>
|
||||
<option value="50">50</option>
|
||||
<option value="100">100</option>
|
||||
</select>
|
||||
</div>
|
||||
<nav aria-label="Cost log pagination">
|
||||
<ul class="pagination pagination-sm mb-0" id="wpaw-pagination">
|
||||
<!-- Pagination will be populated by JS -->
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
315
views/settings-backup/tab-general.php
Normal file
315
views/settings-backup/tab-general.php
Normal file
@@ -0,0 +1,315 @@
|
||||
<?php
|
||||
/**
|
||||
* Settings Tab: General
|
||||
*
|
||||
* @package WP_Agentic_Writer
|
||||
* @var string $api_key
|
||||
* @var float $monthly_budget
|
||||
* @var float $monthly_used
|
||||
* @var float $budget_percent
|
||||
* @var string $budget_status
|
||||
* @var bool $cost_tracking_enabled
|
||||
* @var bool $web_search_enabled
|
||||
* @var string $search_engine
|
||||
* @var string $search_depth
|
||||
* @var bool $enable_clarification_quiz
|
||||
* @var string $clarity_confidence_threshold
|
||||
* @var array $required_context_categories
|
||||
* @var int $chat_history_limit
|
||||
* @var array $preferred_languages
|
||||
* @var array $custom_languages
|
||||
*/
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
$settings_instance = WP_Agentic_Writer_Settings_V2::get_instance();
|
||||
$available_languages = $settings_instance->get_available_languages();
|
||||
?>
|
||||
|
||||
<div class="row g-4">
|
||||
<!-- API Configuration -->
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-white border-bottom-0 pt-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div>
|
||||
<h5 class="card-title mb-1 d-flex align-items-center gap-2"><i class="bi bi-key-fill text-warning"></i><?php esc_html_e( 'API Configuration', 'wp-agentic-writer' ); ?></h5>
|
||||
<p class="text-muted small mb-0"><?php esc_html_e( 'Connect to OpenRouter to access AI models', 'wp-agentic-writer' ); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row align-items-end">
|
||||
<div class="col-md-8">
|
||||
<label for="openrouter_api_key" class="form-label fw-semibold">
|
||||
<?php esc_html_e( 'OpenRouter API Key', 'wp-agentic-writer' ); ?>
|
||||
<span class="text-danger ms-2">*</span>
|
||||
</label>
|
||||
<div class="form-text">
|
||||
<?php printf( wp_kses_post( __( 'Get your API key from <a href="%s" target="_blank" class="text-decoration-none">OpenRouter <i class="bi bi-box-arrow-up-right"></i></a>', 'wp-agentic-writer' ) ), 'https://openrouter.ai/keys' ); ?>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"><span class="dashicons dashicons-admin-network"></span></span>
|
||||
<input type="password" class="form-control" id="openrouter_api_key" name="wp_agentic_writer_settings[openrouter_api_key]" value="<?php echo esc_attr( $api_key ); ?>" placeholder="sk-or-v1-..." />
|
||||
<button class="btn" type="button" id="wpaw-toggle-api-key" style="border-color:#3a4a5e !important">
|
||||
<span class="bi bi-eye"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<button type="button" class="btn btn-outline-primary w-100" id="wpaw-test-api-key">
|
||||
<i class="bi bi-check-circle-fill"></i>
|
||||
<?php esc_html_e( 'Test Connection', 'wp-agentic-writer' ); ?>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Budget & Cost Tracking -->
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-white border-bottom-0 pt-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div>
|
||||
<h5 class="card-title mb-1 d-flex align-items-center gap-2"><i class="bi bi-currency-dollar text-warning"></i><?php esc_html_e( 'Budget & Cost Tracking', 'wp-agentic-writer' ); ?></h5>
|
||||
<p class="text-muted small mb-0"><?php esc_html_e( 'Monitor and control your API spending', 'wp-agentic-writer' ); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- Budget Overview -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 rounded bg-light text-center">
|
||||
<div class="fs-3 fw-bold text-primary">$<?php echo number_format( $monthly_used, 2 ); ?></div>
|
||||
<div class="text-muted small"><?php esc_html_e( 'Used This Month', 'wp-agentic-writer' ); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3">
|
||||
<div class="d-flex justify-content-between mb-1">
|
||||
<span class="small text-muted"><?php esc_html_e( 'Budget Usage', 'wp-agentic-writer' ); ?></span>
|
||||
<span class="small fw-semibold"><?php echo number_format( $budget_percent, 1 ); ?>%</span>
|
||||
</div>
|
||||
<div class="progress" style="height: 10px;">
|
||||
<div class="progress-bar bg-<?php echo esc_attr( $budget_status ); ?>" role="progressbar" style="width: <?php echo min( $budget_percent, 100 ); ?>%"></div>
|
||||
</div>
|
||||
<div class="small text-muted mt-1">
|
||||
$<?php echo number_format( $monthly_used, 2 ); ?> / $<?php echo number_format( $monthly_budget, 2 ); ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 rounded bg-light text-center">
|
||||
<div class="fs-3 fw-bold text-success">$<?php echo number_format( max( 0, $monthly_budget - $monthly_used ), 2 ); ?></div>
|
||||
<div class="text-muted small"><?php esc_html_e( 'Remaining', 'wp-agentic-writer' ); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Budget Input -->
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label for="monthly_budget" class="form-label fw-semibold"><?php esc_html_e( 'Monthly Budget (USD)', 'wp-agentic-writer' ); ?></label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">$</span>
|
||||
<input type="number" class="form-control" id="monthly_budget" name="wp_agentic_writer_settings[monthly_budget]" value="<?php echo esc_attr( $monthly_budget ); ?>" min="0" step="0.01" />
|
||||
</div>
|
||||
<div class="form-text"><?php esc_html_e( 'Maximum spend per month. Set to 0 for unlimited.', 'wp-agentic-writer' ); ?></div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label fw-semibold"><?php esc_html_e( 'Cost Tracking', 'wp-agentic-writer' ); ?></label>
|
||||
<div class="form-check form-switch d-flex align-items-center gap-2">
|
||||
<input class="form-check-input" type="checkbox" id="cost_tracking_enabled" name="wp_agentic_writer_settings[cost_tracking_enabled]" value="1" <?php checked( $cost_tracking_enabled ); ?> />
|
||||
<label class="form-check-label" for="cost_tracking_enabled">
|
||||
<?php esc_html_e( 'Enable cost tracking in editor sidebar', 'wp-agentic-writer' ); ?>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Research & Web Search -->
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-white border-bottom-0 pt-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div>
|
||||
<h5 class="card-title mb-1 d-flex align-items-center gap-2"><i class="bi bi-search text-warning"></i><?php esc_html_e( 'Research & Web Search', 'wp-agentic-writer' ); ?></h5>
|
||||
<p class="text-muted small mb-0"><?php esc_html_e( 'Configure web search for up-to-date content', 'wp-agentic-writer' ); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-12">
|
||||
<div class="form-check form-switch d-flex align-items-center gap-2">
|
||||
<input class="form-check-input" type="checkbox" id="web_search_enabled" name="wp_agentic_writer_settings[web_search_enabled]" value="1" <?php checked( $web_search_enabled ); ?> />
|
||||
<label class="form-check-label" for="web_search_enabled">
|
||||
<?php esc_html_e( 'Enable Web Search', 'wp-agentic-writer' ); ?>
|
||||
<span class="badge text-bg-warning ms-2">~$0.02 per search</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-text"><?php esc_html_e( 'Search the web for current information. Can be toggled per-request in sidebar.', 'wp-agentic-writer' ); ?></div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="search_engine" class="form-label fw-semibold"><?php esc_html_e( 'Search Engine', 'wp-agentic-writer' ); ?></label>
|
||||
<select class="form-select" id="search_engine" name="wp_agentic_writer_settings[search_engine]">
|
||||
<option value="auto" <?php selected( $search_engine, 'auto' ); ?>><?php esc_html_e( 'Auto (Native if available, Exa fallback)', 'wp-agentic-writer' ); ?></option>
|
||||
<option value="native" <?php selected( $search_engine, 'native' ); ?>><?php esc_html_e( 'Native (Provider\'s built-in search)', 'wp-agentic-writer' ); ?></option>
|
||||
<option value="exa" <?php selected( $search_engine, 'exa' ); ?>><?php esc_html_e( 'Exa (Always use Exa search)', 'wp-agentic-writer' ); ?></option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="search_depth" class="form-label fw-semibold"><?php esc_html_e( 'Search Depth', 'wp-agentic-writer' ); ?></label>
|
||||
<select class="form-select" id="search_depth" name="wp_agentic_writer_settings[search_depth]">
|
||||
<option value="low" <?php selected( $search_depth, 'low' ); ?>><?php esc_html_e( 'Low (Basic queries)', 'wp-agentic-writer' ); ?></option>
|
||||
<option value="medium" <?php selected( $search_depth, 'medium' ); ?>><?php esc_html_e( 'Medium (General queries)', 'wp-agentic-writer' ); ?></option>
|
||||
<option value="high" <?php selected( $search_depth, 'high' ); ?>><?php esc_html_e( 'High (Detailed research)', 'wp-agentic-writer' ); ?></option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Clarification Quiz -->
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-white border-bottom-0 pt-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div>
|
||||
<h5 class="card-title mb-1 d-flex align-items-center gap-2"><i class="bi bi-question-circle text-warning"></i><?php esc_html_e( 'Clarification Quiz', 'wp-agentic-writer' ); ?></h5>
|
||||
<p class="text-muted small mb-0"><?php esc_html_e( 'Gather context before writing for better results', 'wp-agentic-writer' ); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-12">
|
||||
<div class="form-check form-switch d-flex align-items-center gap-2">
|
||||
<input class="form-check-input" type="checkbox" id="enable_clarification_quiz" name="wp_agentic_writer_settings[enable_clarification_quiz]" value="1" <?php checked( $enable_clarification_quiz ); ?> />
|
||||
<label class="form-check-label" for="enable_clarification_quiz">
|
||||
<?php esc_html_e( 'Ask clarifying questions when context is missing', 'wp-agentic-writer' ); ?>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="clarity_confidence_threshold" class="form-label fw-semibold"><?php esc_html_e( 'Confidence Threshold', 'wp-agentic-writer' ); ?></label>
|
||||
<select class="form-select" id="clarity_confidence_threshold" name="wp_agentic_writer_settings[clarity_confidence_threshold]">
|
||||
<option value="0.5" <?php selected( $clarity_confidence_threshold, '0.5' ); ?>><?php esc_html_e( 'Very Sensitive (50%)', 'wp-agentic-writer' ); ?></option>
|
||||
<option value="0.6" <?php selected( $clarity_confidence_threshold, '0.6' ); ?>><?php esc_html_e( 'Sensitive (60%) - Recommended', 'wp-agentic-writer' ); ?></option>
|
||||
<option value="0.7" <?php selected( $clarity_confidence_threshold, '0.7' ); ?>><?php esc_html_e( 'Balanced (70%)', 'wp-agentic-writer' ); ?></option>
|
||||
<option value="0.8" <?php selected( $clarity_confidence_threshold, '0.8' ); ?>><?php esc_html_e( 'Strict (80%)', 'wp-agentic-writer' ); ?></option>
|
||||
<option value="0.9" <?php selected( $clarity_confidence_threshold, '0.9' ); ?>><?php esc_html_e( 'Very Strict (90%)', 'wp-agentic-writer' ); ?></option>
|
||||
</select>
|
||||
<div class="form-text"><?php esc_html_e( 'When to trigger the clarification quiz', 'wp-agentic-writer' ); ?></div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label fw-semibold"><?php esc_html_e( 'Context Categories', 'wp-agentic-writer' ); ?></label>
|
||||
<div class="border rounded p-3" style="max-height: 200px; overflow-y: auto;">
|
||||
<?php
|
||||
$categories = array(
|
||||
'target_outcome' => __( 'Target Outcome', 'wp-agentic-writer' ),
|
||||
'target_audience' => __( 'Target Audience', 'wp-agentic-writer' ),
|
||||
'tone' => __( 'Tone of Voice', 'wp-agentic-writer' ),
|
||||
'content_depth' => __( 'Content Depth', 'wp-agentic-writer' ),
|
||||
'expertise_level' => __( 'Expertise Level', 'wp-agentic-writer' ),
|
||||
'content_type' => __( 'Content Type', 'wp-agentic-writer' ),
|
||||
'pov' => __( 'Point of View', 'wp-agentic-writer' ),
|
||||
);
|
||||
foreach ( $categories as $value => $label ) :
|
||||
?>
|
||||
<div class="form-check d-flex align-items-center gap-2">
|
||||
<input class="form-check-input" type="checkbox" id="cat_<?php echo esc_attr( $value ); ?>" name="wp_agentic_writer_settings[required_context_categories][]" value="<?php echo esc_attr( $value ); ?>" <?php checked( in_array( $value, $required_context_categories, true ) ); ?> />
|
||||
<label class="form-check-label" for="cat_<?php echo esc_attr( $value ); ?>"><?php echo esc_html( $label ); ?></label>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Settings / Language -->
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-white border-bottom-0 pt-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div>
|
||||
<h5 class="card-title mb-1 d-flex align-items-center gap-2"><i class="bi bi-globe text-warning"></i><?php esc_html_e( 'Content Settings', 'wp-agentic-writer' ); ?></h5>
|
||||
<p class="text-muted small mb-0"><?php esc_html_e( 'Configure language preferences for your content', 'wp-agentic-writer' ); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-12">
|
||||
<label class="form-label fw-semibold"><?php esc_html_e( 'Preferred Languages', 'wp-agentic-writer' ); ?></label>
|
||||
<div class="row row-cols-2 row-cols-md-4 g-2">
|
||||
<?php foreach ( $available_languages as $code => $label ) : ?>
|
||||
<div class="col">
|
||||
<div class="form-check d-flex align-items-center gap-2">
|
||||
<input class="form-check-input" type="checkbox" id="lang_<?php echo esc_attr( $code ); ?>" name="wp_agentic_writer_settings[preferred_languages][]" value="<?php echo esc_attr( $code ); ?>" <?php checked( in_array( $code, $preferred_languages, true ) ); ?> />
|
||||
<label class="form-check-label small" for="lang_<?php echo esc_attr( $code ); ?>"><?php echo esc_html( $label ); ?></label>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<div class="form-text mt-2"><?php esc_html_e( 'Select which languages will appear in the language selector when creating articles.', 'wp-agentic-writer' ); ?></div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label class="form-label fw-semibold"><?php esc_html_e( 'Custom Languages', 'wp-agentic-writer' ); ?></label>
|
||||
<div id="wpaw-custom-languages-list">
|
||||
<?php if ( ! empty( $custom_languages ) ) : ?>
|
||||
<?php foreach ( $custom_languages as $lang ) : ?>
|
||||
<div class="input-group mb-2 wpaw-custom-language-item">
|
||||
<input type="text" class="form-control" name="wp_agentic_writer_settings[custom_languages][]" value="<?php echo esc_attr( $lang ); ?>" placeholder="<?php esc_attr_e( 'e.g., Betawi, Minangkabau', 'wp-agentic-writer' ); ?>" />
|
||||
<button type="button" class="btn btn-outline-danger wpaw-remove-language">
|
||||
<span class="dashicons dashicons-no-alt"></span>
|
||||
</button>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<button type="button" id="wpaw-add-custom-language" class="btn btn-outline-secondary btn-sm">
|
||||
<span class="dashicons dashicons-plus-alt2 me-1"></span>
|
||||
<?php esc_html_e( 'Add Custom Language', 'wp-agentic-writer' ); ?>
|
||||
</button>
|
||||
<div class="form-text mt-2"><?php esc_html_e( 'Add any language not listed above (e.g., regional dialects, minority languages).', 'wp-agentic-writer' ); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Advanced Settings -->
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-white border-bottom-0 pt-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div>
|
||||
<h5 class="card-title mb-1 d-flex align-items-center gap-2"><i class="bi bi-gear text-warning"></i><?php esc_html_e( 'Advanced Settings', 'wp-agentic-writer' ); ?></h5>
|
||||
<p class="text-muted small mb-0"><?php esc_html_e( 'Additional configuration options', 'wp-agentic-writer' ); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label for="chat_history_limit" class="form-label fw-semibold"><?php esc_html_e( 'Chat History Limit', 'wp-agentic-writer' ); ?></label>
|
||||
<input type="number" class="form-control" id="chat_history_limit" name="wp_agentic_writer_settings[chat_history_limit]" value="<?php echo esc_attr( $chat_history_limit ); ?>" min="0" max="200" style="max-width: 120px;" />
|
||||
<div class="form-text"><?php esc_html_e( 'Messages stored per post. Set to 0 to disable chat history.', 'wp-agentic-writer' ); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
229
views/settings-backup/tab-guide.php
Normal file
229
views/settings-backup/tab-guide.php
Normal file
@@ -0,0 +1,229 @@
|
||||
<?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>
|
||||
307
views/settings-backup/tab-local-backend.php
Normal file
307
views/settings-backup/tab-local-backend.php
Normal file
@@ -0,0 +1,307 @@
|
||||
<?php
|
||||
/**
|
||||
* Settings Tab: Local Backend
|
||||
*
|
||||
* @package WP_Agentic_Writer
|
||||
* @var string $local_backend_url
|
||||
* @var string $local_backend_key
|
||||
* @var string $local_backend_model
|
||||
* @var bool $local_backend_enabled
|
||||
*/
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
?>
|
||||
|
||||
<div class="row g-4">
|
||||
<!-- Download Package -->
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm alert alert-info">
|
||||
<div class="card-header bg-white border-bottom-0 pt-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div>
|
||||
<h5 class="card-title mb-1 d-flex align-items-center gap-2">
|
||||
<i class="bi bi-download text-primary"></i>
|
||||
<?php esc_html_e( 'Step 1: Download Local Backend Package', 'wp-agentic-writer' ); ?>
|
||||
</h5>
|
||||
<p class="text-muted small mb-0">
|
||||
<?php esc_html_e( 'Run AI inference on your own machine with your Claude CLI + Z.ai account', 'wp-agentic-writer' ); ?>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="mb-3">
|
||||
<?php esc_html_e( 'Download the Local Backend proxy to run on your development machine. This allows unlimited, private AI content generation using your existing Claude CLI setup.', 'wp-agentic-writer' ); ?>
|
||||
</p>
|
||||
<a href="<?php echo esc_url( WP_AGENTIC_WRITER_URL . 'downloads/agentic-writer-local-backend.zip' ); ?>"
|
||||
class="btn btn-primary btn-lg" download>
|
||||
<i class="bi bi-download me-2"></i>
|
||||
<?php esc_html_e( 'Download Local Backend v1.0.0', 'wp-agentic-writer' ); ?>
|
||||
</a>
|
||||
|
||||
<details class="mt-3">
|
||||
<summary class="fw-semibold" style="cursor: pointer;">
|
||||
<?php esc_html_e( 'Prerequisites', 'wp-agentic-writer' ); ?>
|
||||
</summary>
|
||||
<ul class="mt-2">
|
||||
<li>
|
||||
✅ <strong><?php esc_html_e( 'Claude CLI', 'wp-agentic-writer' ); ?></strong> -
|
||||
<?php esc_html_e( 'Get from', 'wp-agentic-writer' ); ?>
|
||||
<a href="https://claude.ai/code" target="_blank">claude.ai/code</a>
|
||||
<?php esc_html_e( 'or', 'wp-agentic-writer' ); ?>
|
||||
<a href="https://z.ai" target="_blank">z.ai</a>
|
||||
</li>
|
||||
<li>
|
||||
✅ <strong><?php esc_html_e( 'Node.js 18+', 'wp-agentic-writer' ); ?></strong> -
|
||||
<a href="https://nodejs.org" target="_blank"><?php esc_html_e( 'Download', 'wp-agentic-writer' ); ?></a>
|
||||
</li>
|
||||
<li>
|
||||
✅ <strong><?php esc_html_e( 'Z.ai Coding Plan or Anthropic API key', 'wp-agentic-writer' ); ?></strong> -
|
||||
<?php esc_html_e( 'Configured in Claude CLI', 'wp-agentic-writer' ); ?>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Configuration -->
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-white border-bottom-0 pt-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div>
|
||||
<h5 class="card-title mb-1 d-flex align-items-center gap-2">
|
||||
<i class="bi bi-gear-fill text-success"></i>
|
||||
<?php esc_html_e( 'Step 2: Configure Connection', 'wp-agentic-writer' ); ?>
|
||||
</h5>
|
||||
<p class="text-muted small mb-0">
|
||||
<?php esc_html_e( 'After starting the proxy, enter the connection details here', 'wp-agentic-writer' ); ?>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label for="local_backend_url" class="form-label fw-semibold">
|
||||
<?php esc_html_e( 'Base URL', 'wp-agentic-writer' ); ?>
|
||||
<span class="text-danger ms-2">*</span>
|
||||
</label>
|
||||
<input type="url"
|
||||
class="form-control"
|
||||
id="local_backend_url"
|
||||
name="wp_agentic_writer_settings[local_backend_url]"
|
||||
value="<?php echo esc_attr( $local_backend_url ); ?>"
|
||||
placeholder="http://192.168.1.105:8080">
|
||||
<div class="form-text">
|
||||
<?php esc_html_e( 'Enter the URL from your Local Backend startup message (e.g., http://YOUR-IP:8080)', 'wp-agentic-writer' ); ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="local_backend_key" class="form-label fw-semibold">
|
||||
<?php esc_html_e( 'API Key', 'wp-agentic-writer' ); ?>
|
||||
</label>
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
id="local_backend_key"
|
||||
name="wp_agentic_writer_settings[local_backend_key]"
|
||||
value="<?php echo esc_attr( $local_backend_key ); ?>"
|
||||
placeholder="dummy">
|
||||
<div class="form-text">
|
||||
<?php esc_html_e( 'Use "dummy" for local backend (ignored by proxy)', 'wp-agentic-writer' ); ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="local_backend_model" class="form-label fw-semibold">
|
||||
<?php esc_html_e( 'Model', 'wp-agentic-writer' ); ?>
|
||||
</label>
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
id="local_backend_model"
|
||||
name="wp_agentic_writer_settings[local_backend_model]"
|
||||
value="<?php echo esc_attr( $local_backend_model ); ?>"
|
||||
placeholder="claude-local">
|
||||
<div class="form-text">
|
||||
<?php esc_html_e( 'Model identifier (informational only, proxy uses your Claude CLI default)', 'wp-agentic-writer' ); ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-2 align-items-center">
|
||||
<button type="button" id="test-local-backend" class="btn btn-outline-primary">
|
||||
<i class="bi bi-plug me-2"></i>
|
||||
<?php esc_html_e( 'Test Connection', 'wp-agentic-writer' ); ?>
|
||||
</button>
|
||||
<span id="connection-status" class="ms-2"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Task Routing (Optional) -->
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-white border-bottom-0 pt-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div>
|
||||
<h5 class="card-title mb-1 d-flex align-items-center gap-2">
|
||||
<i class="bi bi-diagram-3 text-warning"></i>
|
||||
<?php esc_html_e( 'Step 3: Provider Routing (Advanced)', 'wp-agentic-writer' ); ?>
|
||||
</h5>
|
||||
<p class="text-muted small mb-0">
|
||||
<?php esc_html_e( 'Choose which provider to use for each task type', 'wp-agentic-writer' ); ?>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="alert alert-info mb-3">
|
||||
<i class="bi bi-info-circle me-2"></i>
|
||||
<strong><?php esc_html_e( 'Recommended Setup:', 'wp-agentic-writer' ); ?></strong>
|
||||
<?php esc_html_e( 'Use Local Backend for all text tasks (free, fast, private). Use OpenRouter for images (only option).', 'wp-agentic-writer' ); ?>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
$task_types = array(
|
||||
'chat' => __( 'Chat & Discussion', 'wp-agentic-writer' ),
|
||||
'clarity' => __( 'Clarity Check & Quiz', 'wp-agentic-writer' ),
|
||||
'planning' => __( 'Outline Planning', 'wp-agentic-writer' ),
|
||||
'writing' => __( 'Article Writing', 'wp-agentic-writer' ),
|
||||
'refinement' => __( 'Content Refinement', 'wp-agentic-writer' ),
|
||||
'image' => __( 'Image Generation', 'wp-agentic-writer' ),
|
||||
);
|
||||
|
||||
$task_providers = $settings['task_providers'] ?? array();
|
||||
?>
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><?php esc_html_e( 'Task Type', 'wp-agentic-writer' ); ?></th>
|
||||
<th><?php esc_html_e( 'Provider', 'wp-agentic-writer' ); ?></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach ( $task_types as $task_key => $task_label ) : ?>
|
||||
<tr>
|
||||
<td><?php echo esc_html( $task_label ); ?></td>
|
||||
<td>
|
||||
<select class="form-select form-select-sm"
|
||||
name="wp_agentic_writer_settings[task_providers][<?php echo esc_attr( $task_key ); ?>]">
|
||||
<?php
|
||||
$current_provider = $task_providers[ $task_key ] ?? 'openrouter';
|
||||
|
||||
// Available providers per task
|
||||
$providers = array(
|
||||
'openrouter' => '☁️ OpenRouter (Cloud)',
|
||||
);
|
||||
|
||||
// Add local backend for text tasks
|
||||
if ( 'image' !== $task_key ) {
|
||||
$providers['local_backend'] = '🏠 Local Backend (Free)';
|
||||
$providers['codex'] = '🔗 Codex (OpenAI)';
|
||||
}
|
||||
|
||||
foreach ( $providers as $provider_key => $provider_label ) :
|
||||
?>
|
||||
<option value="<?php echo esc_attr( $provider_key ); ?>"
|
||||
<?php selected( $current_provider, $provider_key ); ?>>
|
||||
<?php echo esc_html( $provider_label ); ?>
|
||||
</option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Help -->
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm border-warning">
|
||||
<div class="card-header bg-white border-bottom-0 pt-3">
|
||||
<h5 class="card-title mb-0 d-flex align-items-center gap-2">
|
||||
<i class="bi bi-question-circle text-warning"></i>
|
||||
<?php esc_html_e( 'Troubleshooting', 'wp-agentic-writer' ); ?>
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="mb-0">
|
||||
<li>
|
||||
<strong><?php esc_html_e( 'Connection failed?', 'wp-agentic-writer' ); ?></strong>
|
||||
<?php esc_html_e( 'Ensure proxy is running:', 'wp-agentic-writer' ); ?>
|
||||
<code>./start-proxy.sh</code>
|
||||
</li>
|
||||
<li>
|
||||
<strong><?php esc_html_e( 'Wrong IP?', 'wp-agentic-writer' ); ?></strong>
|
||||
<?php esc_html_e( 'Run', 'wp-agentic-writer' ); ?>
|
||||
<code>./get-local-ip.sh</code>
|
||||
<?php esc_html_e( 'to find correct address', 'wp-agentic-writer' ); ?>
|
||||
</li>
|
||||
<li>
|
||||
<strong><?php esc_html_e( 'Firewall blocking?', 'wp-agentic-writer' ); ?></strong>
|
||||
<?php esc_html_e( 'Allow Node.js on port 8080 in your system firewall', 'wp-agentic-writer' ); ?>
|
||||
</li>
|
||||
<li>
|
||||
<strong><?php esc_html_e( 'Claude not found?', 'wp-agentic-writer' ); ?></strong>
|
||||
<?php esc_html_e( 'Check Claude CLI:', 'wp-agentic-writer' ); ?>
|
||||
<code>which claude</code>
|
||||
<?php esc_html_e( 'or', 'wp-agentic-writer' ); ?>
|
||||
<code>claude --version</code>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="mt-3 mb-0">
|
||||
<strong><?php esc_html_e( 'Need help?', 'wp-agentic-writer' ); ?></strong>
|
||||
<?php esc_html_e( 'Check the README.md and TROUBLESHOOTING.md files in the downloaded package.', 'wp-agentic-writer' ); ?>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
$('#test-local-backend').on('click', function() {
|
||||
const btn = $(this);
|
||||
const status = $('#connection-status');
|
||||
const url = $('#local_backend_url').val();
|
||||
|
||||
if (!url) {
|
||||
status.html('<span class="text-warning">⚠️ Enter Base URL first</span>');
|
||||
return;
|
||||
}
|
||||
|
||||
btn.prop('disabled', true).html('<i class="spinner-border spinner-border-sm me-2"></i>Testing...');
|
||||
status.html('<span class="text-white" style="color:#17a2b8 !important;">⏳ Connecting...</span>');
|
||||
|
||||
$.ajax({
|
||||
url: ajaxurl,
|
||||
method: 'POST',
|
||||
data: {
|
||||
action: 'wpaw_test_local_backend',
|
||||
url: url,
|
||||
nonce: '<?php echo esc_js( wp_create_nonce( 'wpaw_test_local_backend' ) ); ?>'
|
||||
},
|
||||
success: function(response) {
|
||||
if (response.success) {
|
||||
status.html('<span class="text-success">✅ ' + response.data.message + '</span>');
|
||||
} else {
|
||||
status.html('<span class="text-danger">❌ ' + (response.data.message || 'Failed') + '</span>');
|
||||
}
|
||||
},
|
||||
error: function(xhr) {
|
||||
status.html('<span class="text-danger">❌ Connection failed. Check URL and proxy status.</span>');
|
||||
},
|
||||
complete: function() {
|
||||
btn.prop('disabled', false).html('<i class="bi bi-plug me-2"></i><?php esc_html_e( 'Test Connection', 'wp-agentic-writer' ); ?>');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
267
views/settings-backup/tab-models.php
Normal file
267
views/settings-backup/tab-models.php
Normal file
@@ -0,0 +1,267 @@
|
||||
<?php
|
||||
/**
|
||||
* Settings Tab: AI Models
|
||||
*
|
||||
* @package WP_Agentic_Writer
|
||||
* @var string $chat_model
|
||||
* @var string $clarity_model
|
||||
* @var string $planning_model
|
||||
* @var string $writing_model
|
||||
* @var string $refinement_model
|
||||
* @var string $image_model
|
||||
* @var array $custom_models
|
||||
*/
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
?>
|
||||
|
||||
<div class="row g-4">
|
||||
<!-- Quick Presets -->
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-white border-bottom-0 pt-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div>
|
||||
<h5 class="card-title mb-1 d-flex align-items-center gap-2"><i class="bi bi-lightning-fill text-warning"></i><?php esc_html_e( 'Quick Presets', 'wp-agentic-writer' ); ?></h5>
|
||||
<p class="text-muted small mb-0"><?php esc_html_e( 'One-click configurations for different budgets', 'wp-agentic-writer' ); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<!-- Budget Preset -->
|
||||
<div class="col-md-4">
|
||||
<div class="card border-2 preset-card" data-preset="budget" role="button" tabindex="0">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<h6 class="card-title mb-0"><?php esc_html_e( 'Budget', 'wp-agentic-writer' ); ?></h6>
|
||||
<span class="badge text-success" style="color: rgba(var(--bs-success-rgb),var(--bs-text-opacity))!important;">💰 ~$0.06/article</span>
|
||||
</div>
|
||||
<div class="small text-muted">
|
||||
<div><strong>Chat/Clarity/Planning/Refinement:</strong> Gemini 2.5 Flash</div>
|
||||
<div><strong>Writing:</strong> Mistral Small Creative</div>
|
||||
<div><strong>Image:</strong> FLUX.2 klein</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Balanced Preset -->
|
||||
<div class="col-md-4">
|
||||
<div class="card border-2 border-primary preset-card" data-preset="balanced" role="button" tabindex="0">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<h6 class="card-title mb-0"><?php esc_html_e( 'Balanced', 'wp-agentic-writer' ); ?></h6>
|
||||
<span class="badge bg-primary">⭐ ~$0.14/article</span>
|
||||
</div>
|
||||
<div class="small text-muted">
|
||||
<div><strong>Chat/Clarity/Planning:</strong> Gemini 2.5 Flash</div>
|
||||
<div><strong>Writing/Refinement:</strong> Claude 3.5 Sonnet</div>
|
||||
<div><strong>Image:</strong> Riverflow V2 Max</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Premium Preset -->
|
||||
<div class="col-md-4">
|
||||
<div class="card border-2 preset-card" data-preset="premium" role="button" tabindex="0">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<h6 class="card-title mb-0"><?php esc_html_e( 'Premium', 'wp-agentic-writer' ); ?></h6>
|
||||
<span class="badge text-warning" style="color:rgba(var(--bs-warning-rgb),var(--bs-text-opacity))!important;" >✨ ~$0.31/article</span>
|
||||
</div>
|
||||
<div class="small text-muted">
|
||||
<div><strong>Chat/Planning:</strong> Gemini 3 Flash Preview</div>
|
||||
<div><strong>Clarity:</strong> Claude Sonnet 4</div>
|
||||
<div><strong>Writing/Refinement:</strong> GPT-4.1</div>
|
||||
<div><strong>Image:</strong> FLUX.2 max</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Individual Model Selectors -->
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-white border-bottom-0 pt-3">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div class="d-flex align-items-center">
|
||||
<div>
|
||||
<h5 class="card-title mb-1 d-flex align-items-center gap-2"><i class="bi bi-robot text-warning"></i><?php esc_html_e( 'AI Model Configuration', 'wp-agentic-writer' ); ?></h5>
|
||||
<p class="text-muted small mb-0"><?php esc_html_e( '6 specialized models for optimal results. Use search to find models.', 'wp-agentic-writer' ); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline-primary btn-sm" id="wpaw-refresh-models">
|
||||
<span class="spinner-border spinner-border-sm d-none me-1" id="wpaw-models-spinner"></span>
|
||||
<span class="dashicons dashicons-update me-1"></span>
|
||||
<?php esc_html_e( 'Refresh Models', 'wp-agentic-writer' ); ?>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="wpaw-models-message" class="alert d-none mb-3"></div>
|
||||
|
||||
<div class="row g-4">
|
||||
<!-- Chat Model -->
|
||||
<div class="col-md-6">
|
||||
<label for="chat_model" class="form-label fw-semibold">
|
||||
<?php esc_html_e( 'Chat Model', 'wp-agentic-writer' ); ?>
|
||||
<span class="badge bg-info-subtle text-info ms-2">Discussion</span>
|
||||
</label>
|
||||
<select id="chat_model" name="wp_agentic_writer_settings[chat_model]" class="form-select wpaw-select2-model" data-model-type="chat">
|
||||
<option value="<?php echo esc_attr( $chat_model ); ?>"><?php echo esc_html( $chat_model ); ?></option>
|
||||
</select>
|
||||
<div class="form-text"><?php esc_html_e( 'Discussion, research, recommendations', 'wp-agentic-writer' ); ?></div>
|
||||
</div>
|
||||
|
||||
<!-- Clarity Model -->
|
||||
<div class="col-md-6">
|
||||
<label for="clarity_model" class="form-label fw-semibold">
|
||||
<?php esc_html_e( 'Clarity Model', 'wp-agentic-writer' ); ?>
|
||||
<span class="badge bg-info-subtle text-info ms-2">Analysis</span>
|
||||
</label>
|
||||
<select id="clarity_model" name="wp_agentic_writer_settings[clarity_model]" class="form-select wpaw-select2-model" data-model-type="clarity">
|
||||
<option value="<?php echo esc_attr( $clarity_model ); ?>"><?php echo esc_html( $clarity_model ); ?></option>
|
||||
</select>
|
||||
<div class="form-text"><?php esc_html_e( 'Prompt analysis, quiz generation', 'wp-agentic-writer' ); ?></div>
|
||||
</div>
|
||||
|
||||
<!-- Planning Model -->
|
||||
<div class="col-md-6">
|
||||
<label for="planning_model" class="form-label fw-semibold">
|
||||
<?php esc_html_e( 'Planning Model', 'wp-agentic-writer' ); ?>
|
||||
<span class="badge bg-info-subtle text-info ms-2">Outline</span>
|
||||
</label>
|
||||
<select id="planning_model" name="wp_agentic_writer_settings[planning_model]" class="form-select wpaw-select2-model" data-model-type="planning">
|
||||
<option value="<?php echo esc_attr( $planning_model ); ?>"><?php echo esc_html( $planning_model ); ?></option>
|
||||
</select>
|
||||
<div class="form-text"><?php esc_html_e( 'Article outline generation', 'wp-agentic-writer' ); ?></div>
|
||||
</div>
|
||||
|
||||
<!-- Writing Model -->
|
||||
<div class="col-md-6">
|
||||
<label for="writing_model" class="form-label fw-semibold">
|
||||
<?php esc_html_e( 'Writing Model', 'wp-agentic-writer' ); ?>
|
||||
<span class="badge bg-primary ms-2">Main Writer</span>
|
||||
</label>
|
||||
<select id="writing_model" name="wp_agentic_writer_settings[writing_model]" class="form-select wpaw-select2-model" data-model-type="execution">
|
||||
<option value="<?php echo esc_attr( $writing_model ); ?>"><?php echo esc_html( $writing_model ); ?></option>
|
||||
</select>
|
||||
<div class="form-text"><?php esc_html_e( 'Article draft generation (2-5k words)', 'wp-agentic-writer' ); ?></div>
|
||||
</div>
|
||||
|
||||
<!-- Refinement Model -->
|
||||
<div class="col-md-6">
|
||||
<label for="refinement_model" class="form-label fw-semibold">
|
||||
<?php esc_html_e( 'Refinement Model', 'wp-agentic-writer' ); ?>
|
||||
<span class="badge bg-info text-info ms-2">Editing</span>
|
||||
</label>
|
||||
<select id="refinement_model" name="wp_agentic_writer_settings[refinement_model]" class="form-select wpaw-select2-model" data-model-type="execution">
|
||||
<option value="<?php echo esc_attr( $refinement_model ); ?>"><?php echo esc_html( $refinement_model ); ?></option>
|
||||
</select>
|
||||
<div class="form-text"><?php esc_html_e( 'Paragraph edits, rewrites, polish', 'wp-agentic-writer' ); ?></div>
|
||||
</div>
|
||||
|
||||
<!-- Image Model -->
|
||||
<div class="col-md-6">
|
||||
<label for="image_model" class="form-label fw-semibold">
|
||||
<?php esc_html_e( 'Image Model', 'wp-agentic-writer' ); ?>
|
||||
<span class="badge text-bg-warning ms-2">Visual</span>
|
||||
</label>
|
||||
<select id="image_model" name="wp_agentic_writer_settings[image_model]" class="form-select wpaw-select2-model" data-model-type="image">
|
||||
<option value="<?php echo esc_attr( $image_model ); ?>"><?php echo esc_html( $image_model ); ?></option>
|
||||
</select>
|
||||
<div class="form-text"><?php esc_html_e( 'Image generation', 'wp-agentic-writer' ); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom Models Section -->
|
||||
<div class="mt-4 pt-4 border-top">
|
||||
<div class="d-flex align-items-center justify-content-between mb-3">
|
||||
<div>
|
||||
<h6 class="mb-1 d-flex align-items-center gap-2">
|
||||
<i class="bi bi-plus-circle text-success"></i>
|
||||
<?php esc_html_e( 'Custom Models', 'wp-agentic-writer' ); ?>
|
||||
</h6>
|
||||
<p class="text-muted small mb-0"><?php esc_html_e( 'Add models not listed in API (e.g., black-forest-labs/flux.2-klein-4b). They work if you know the exact ID.', 'wp-agentic-writer' ); ?></p>
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline-success btn-sm" id="wpaw-add-custom-model">
|
||||
<i class="bi bi-plus"></i> <?php esc_html_e( 'Add Model', 'wp-agentic-writer' ); ?>
|
||||
</button>
|
||||
</div>
|
||||
<div id="wpaw-custom-models-list">
|
||||
<?php
|
||||
if ( ! empty( $custom_models ) ) :
|
||||
foreach ( $custom_models as $custom_model ) :
|
||||
?>
|
||||
<div class="custom-model-row d-flex gap-2 mb-2 align-items-center" data-saved="true">
|
||||
<input type="text"
|
||||
data-field="id"
|
||||
value="<?php echo esc_attr( $custom_model['id'] ?? '' ); ?>"
|
||||
class="form-control form-control-sm wpaw-custom-model-id"
|
||||
placeholder="model-provider/model-name"
|
||||
style="flex: 2;">
|
||||
<input type="text"
|
||||
data-field="name"
|
||||
value="<?php echo esc_attr( $custom_model['name'] ?? '' ); ?>"
|
||||
class="form-control form-control-sm wpaw-custom-model-name"
|
||||
placeholder="Display Name (optional)"
|
||||
style="flex: 2;">
|
||||
<select data-field="type" class="form-select form-select-sm wpaw-custom-model-type" style="flex: 1;">
|
||||
<option value="text" <?php selected( ( $custom_model['type'] ?? 'text' ), 'text' ); ?>><?php esc_html_e( 'Text', 'wp-agentic-writer' ); ?></option>
|
||||
<option value="image" <?php selected( ( $custom_model['type'] ?? 'text' ), 'image' ); ?>><?php esc_html_e( 'Image', 'wp-agentic-writer' ); ?></option>
|
||||
</select>
|
||||
<button type="button" class="btn btn-outline-danger btn-sm wpaw-remove-custom-model">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
<?php
|
||||
endforeach;
|
||||
endif;
|
||||
?>
|
||||
</div>
|
||||
<template id="wpaw-custom-model-template">
|
||||
<div class="custom-model-row d-flex gap-2 mb-2 align-items-center">
|
||||
<input type="text"
|
||||
data-field="id"
|
||||
class="form-control form-control-sm wpaw-custom-model-id"
|
||||
placeholder="model-provider/model-name"
|
||||
style="flex: 2;">
|
||||
<input type="text"
|
||||
data-field="name"
|
||||
class="form-control form-control-sm wpaw-custom-model-name"
|
||||
placeholder="Display Name (optional)"
|
||||
style="flex: 2;">
|
||||
<select data-field="type" class="form-select form-select-sm wpaw-custom-model-type" style="flex: 1;">
|
||||
<option value="text"><?php esc_html_e( 'Text', 'wp-agentic-writer' ); ?></option>
|
||||
<option value="image"><?php esc_html_e( 'Image', 'wp-agentic-writer' ); ?></option>
|
||||
</select>
|
||||
<button type="button" class="btn btn-outline-danger btn-sm wpaw-remove-custom-model">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Cost Estimate Display -->
|
||||
<div class="mt-4 p-4 bg-dark rounded-3">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="mb-1"><?php esc_html_e( 'Estimated Cost Per Article', 'wp-agentic-writer' ); ?></h6>
|
||||
<p class="text-muted small mb-0"><?php esc_html_e( 'Based on ~2K planning tokens, ~4K execution tokens, and 1 image.', 'wp-agentic-writer' ); ?></p>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<div id="wpaw-cost-estimate" class="fs-3 fw-bold text-primary">~$0.00</div>
|
||||
<div class="text-muted small"><?php esc_html_e( 'per article', 'wp-agentic-writer' ); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -14,49 +14,56 @@ if ( ! defined( 'ABSPATH' ) ) {
|
||||
extract( $view_data );
|
||||
?>
|
||||
<div class="wrap wpaw-settings-v2-wrap">
|
||||
<div class="container py-4">
|
||||
<!-- Header -->
|
||||
<div class="wpaw-agentic-header mb-4">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<!-- Agentic IDE Split View Layout -->
|
||||
<div class="wpaw-ide-container d-flex">
|
||||
|
||||
<!-- Left Sidebar: Settings Navigation -->
|
||||
<div class="wpaw-sidebar-nav flex-shrink-0">
|
||||
<!-- Header inside Sidebar -->
|
||||
<div class="wpaw-sidebar-header p-3 mb-2 border-bottom border-dark">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<img src="<?php echo esc_url( WP_AGENTIC_WRITER_URL . 'assets/img/icon.svg' ); ?>"
|
||||
alt="WP Agentic Writer"
|
||||
style="width: 48px; height: 48px; filter: invert(1)">
|
||||
<div>
|
||||
<h1 class="h3 mb-1"><?php esc_html_e( 'WP Agentic Writer', 'wp-agentic-writer' ); ?></h1>
|
||||
<p class="text-muted mb-0">
|
||||
v<?php echo esc_html( WP_AGENTIC_WRITER_VERSION ); ?> ·
|
||||
<?php esc_html_e( 'Settings & Configuration', 'wp-agentic-writer' ); ?>
|
||||
</p>
|
||||
</div>
|
||||
style="width: 24px; height: 24px; filter: invert(1)">
|
||||
<h1 class="h6 mb-0 text-white fw-bold">Agentic Writer</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab Navigation -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<ul class="nav nav-pills nav-fill gap-2 p-2" id="wpaw-settings-tabs" role="tablist">
|
||||
<li class="nav-item mb-0" role="presentation">
|
||||
<button class="nav-link active d-flex align-items-center justify-content-center gap-2" id="general-tab" data-bs-toggle="pill" data-bs-target="#general" type="button" role="tab" aria-controls="general" aria-selected="true">
|
||||
<!-- Search Placeholder (Phase 2) -->
|
||||
<!-- <div class="px-3 mb-3"><input type="text" class="form-control form-control-sm wpaw-search-input" placeholder="Search settings..."></div> -->
|
||||
|
||||
<!-- Navigation Tree -->
|
||||
<div class="wpaw-nav-tree px-2">
|
||||
<div class="text-uppercase small text-secondary fw-semibold mb-2 px-2" style="font-size: 0.7rem; tracking: 1px;">Configuration</div>
|
||||
<ul class="nav flex-column gap-1" id="wpaw-settings-tabs" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active w-100 text-start d-flex align-items-center gap-2" id="general-tab" data-bs-toggle="pill" data-bs-target="#general" type="button" role="tab" aria-controls="general" aria-selected="true">
|
||||
<i class="bi bi-sliders"></i>
|
||||
<?php esc_html_e( 'General', 'wp-agentic-writer' ); ?>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item mb-0" role="presentation">
|
||||
<button class="nav-link d-flex align-items-center justify-content-center gap-2" id="models-tab" data-bs-toggle="pill" data-bs-target="#models" type="button" role="tab" aria-controls="models" aria-selected="false">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link w-100 text-start d-flex align-items-center gap-2" id="models-tab" data-bs-toggle="pill" data-bs-target="#models" type="button" role="tab" aria-controls="models" aria-selected="false">
|
||||
<i class="bi bi-stars"></i>
|
||||
<?php esc_html_e( 'AI Models', 'wp-agentic-writer' ); ?>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item mb-0" role="presentation">
|
||||
<button class="nav-link d-flex align-items-center justify-content-center gap-2" id="cost-log-tab" data-bs-toggle="pill" data-bs-target="#cost-log" type="button" role="tab" aria-controls="cost-log" aria-selected="false">
|
||||
<i class="bi bi-graph-up"></i>
|
||||
<?php esc_html_e( 'Cost Log', 'wp-agentic-writer' ); ?>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link w-100 text-start d-flex align-items-center gap-2" id="local-backend-tab" data-bs-toggle="pill" data-bs-target="#local-backend" type="button" role="tab" aria-controls="local-backend" aria-selected="false">
|
||||
<i class="bi bi-house-fill"></i>
|
||||
<?php esc_html_e( 'Local Backend', 'wp-agentic-writer' ); ?>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item mb-0" role="presentation">
|
||||
<button class="nav-link d-flex align-items-center justify-content-center gap-2" id="guide-tab" data-bs-toggle="pill" data-bs-target="#guide" type="button" role="tab" aria-controls="guide" aria-selected="false">
|
||||
|
||||
<div class="text-uppercase small text-secondary fw-semibold mb-2 mt-4 px-2" style="font-size: 0.7rem; tracking: 1px;">Analytics & Docs</div>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link w-100 text-start d-flex align-items-center gap-2" id="cost-log-tab" data-bs-toggle="pill" data-bs-target="#cost-log" type="button" role="tab" aria-controls="cost-log" aria-selected="false">
|
||||
<i class="bi bi-graph-up"></i>
|
||||
<?php esc_html_e( 'OpenRouter Cost Log', 'wp-agentic-writer' ); ?>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link w-100 text-start d-flex align-items-center gap-2" id="guide-tab" data-bs-toggle="pill" data-bs-target="#guide" type="button" role="tab" aria-controls="guide" aria-selected="false">
|
||||
<i class="bi bi-book"></i>
|
||||
<?php esc_html_e( 'Model Guide', 'wp-agentic-writer' ); ?>
|
||||
</button>
|
||||
@@ -65,57 +72,82 @@ extract( $view_data );
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Start -->
|
||||
<form method="post" action="options.php" id="wpaw-settings-form">
|
||||
<?php settings_fields( 'wp_agentic_writer_settings' ); ?>
|
||||
<!-- Right Content Pane: Settings Forms -->
|
||||
<div class="wpaw-content-pane flex-grow-1 d-flex flex-column h-100">
|
||||
<form method="post" action="options.php" id="wpaw-settings-form" class="h-100 d-flex flex-column">
|
||||
<?php settings_fields( 'wp_agentic_writer_settings' ); ?>
|
||||
|
||||
<!-- Tab Content -->
|
||||
<div class="tab-content" id="wpaw-settings-tab-content">
|
||||
<!-- General Tab -->
|
||||
<div class="tab-pane fade show active" id="general" role="tabpanel" aria-labelledby="general-tab">
|
||||
<?php include WP_AGENTIC_WRITER_DIR . 'views/settings/tab-general.php'; ?>
|
||||
</div>
|
||||
|
||||
<!-- Models Tab -->
|
||||
<div class="tab-pane fade" id="models" role="tabpanel" aria-labelledby="models-tab">
|
||||
<?php include WP_AGENTIC_WRITER_DIR . 'views/settings/tab-models.php'; ?>
|
||||
</div>
|
||||
|
||||
<!-- Cost Log Tab -->
|
||||
<div class="tab-pane fade" id="cost-log" role="tabpanel" aria-labelledby="cost-log-tab">
|
||||
<?php include WP_AGENTIC_WRITER_DIR . 'views/settings/tab-cost-log.php'; ?>
|
||||
</div>
|
||||
|
||||
<!-- Guide Tab -->
|
||||
<div class="tab-pane fade" id="guide" role="tabpanel" aria-labelledby="guide-tab">
|
||||
<?php include WP_AGENTIC_WRITER_DIR . 'views/settings/tab-guide.php'; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sticky Save Button -->
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body d-flex justify-content-between align-items-center py-3">
|
||||
<div class="text-muted small">
|
||||
<span class="dashicons dashicons-info-outline me-1"></span>
|
||||
<?php esc_html_e( 'Changes are saved immediately after clicking Save.', 'wp-agentic-writer' ); ?>
|
||||
<!-- Scrollable Tab Content Area -->
|
||||
<div class="wpaw-tab-scroll-area flex-grow-1 p-4 p-md-5 overflow-auto">
|
||||
<div class="tab-content" id="wpaw-settings-tab-content">
|
||||
<!-- General Tab -->
|
||||
<div class="tab-pane fade show active" id="general" role="tabpanel" aria-labelledby="general-tab">
|
||||
<div class="mb-4 pb-3 border-bottom border-dark">
|
||||
<h2 class="h4 text-white m-0">General Settings</h2>
|
||||
<p class="text-secondary small mt-1">Configure global API keys, budget, and content parameters.</p>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<button type="button" class="btn btn-outline-secondary" id="wpaw-reset-settings">
|
||||
<span class="dashicons dashicons-image-rotate me-1"></span>
|
||||
<?php esc_html_e( 'Reset to Defaults', 'wp-agentic-writer' ); ?>
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary btn-lg px-4" id="wpaw-save-settings">
|
||||
<span class="dashicons dashicons-saved me-1"></span>
|
||||
<?php esc_html_e( 'Save Settings', 'wp-agentic-writer' ); ?>
|
||||
</button>
|
||||
<?php include WP_AGENTIC_WRITER_DIR . 'views/settings/tab-general.php'; ?>
|
||||
</div>
|
||||
|
||||
<!-- Models Tab -->
|
||||
<div class="tab-pane fade" id="models" role="tabpanel" aria-labelledby="models-tab">
|
||||
<div class="mb-4 pb-3 border-bottom border-dark">
|
||||
<h2 class="h4 text-white m-0">AI Models</h2>
|
||||
<p class="text-secondary small mt-1">Select logic engines for different stages of the writing pipeline.</p>
|
||||
</div>
|
||||
<?php include WP_AGENTIC_WRITER_DIR . 'views/settings/tab-models.php'; ?>
|
||||
</div>
|
||||
|
||||
<!-- Local Backend Tab -->
|
||||
<div class="tab-pane fade" id="local-backend" role="tabpanel" aria-labelledby="local-backend-tab">
|
||||
<div class="mb-4 pb-3 border-bottom border-dark">
|
||||
<h2 class="h4 text-white m-0">Local Backend</h2>
|
||||
<p class="text-secondary small mt-1">Configure connections to local LM Studio or Ollama instances.</p>
|
||||
</div>
|
||||
<?php include WP_AGENTIC_WRITER_DIR . 'views/settings/tab-local-backend.php'; ?>
|
||||
</div>
|
||||
|
||||
<!-- Cost Log Tab -->
|
||||
<div class="tab-pane fade" id="cost-log" role="tabpanel" aria-labelledby="cost-log-tab">
|
||||
<div class="mb-4 pb-3 border-bottom border-dark">
|
||||
<h2 class="h4 text-white m-0">OpenRouter Cost Analytics</h2>
|
||||
<p class="text-secondary small mt-1">Track API token usage and expenses across all generations.</p>
|
||||
</div>
|
||||
<?php include WP_AGENTIC_WRITER_DIR . 'views/settings/tab-cost-log.php'; ?>
|
||||
</div>
|
||||
|
||||
<!-- Guide Tab -->
|
||||
<div class="tab-pane fade" id="guide" role="tabpanel" aria-labelledby="guide-tab">
|
||||
<div class="mb-4 pb-3 border-bottom border-dark">
|
||||
<h2 class="h4 text-white m-0">Provider Documentation</h2>
|
||||
<p class="text-secondary small mt-1">Reference materials for selecting the right model constraints.</p>
|
||||
</div>
|
||||
<?php include WP_AGENTIC_WRITER_DIR . 'views/settings/tab-guide.php'; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Fixed Bottom Save Bar (Compact) -->
|
||||
<div class="wpaw-save-bar p-3 border-top border-dark d-flex justify-content-between align-items-center bg-transparent mt-auto sticky-bottom">
|
||||
<div class="text-secondary small d-flex align-items-center gap-2">
|
||||
<span class="dashicons dashicons-plugin text-primary"></span>
|
||||
<?php printf( esc_html__( 'v%s', 'wp-agentic-writer' ), esc_html( WP_AGENTIC_WRITER_VERSION ) ); ?>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary" id="wpaw-reset-settings">
|
||||
<?php esc_html_e( 'Reset Defaults', 'wp-agentic-writer' ); ?>
|
||||
</button>
|
||||
<button type="submit" class="btn btn-sm btn-primary px-4 fw-semibold" id="wpaw-save-settings">
|
||||
<?php
|
||||
$is_mac = isset( $_SERVER['HTTP_USER_AGENT'] ) && strpos( wp_unslash( $_SERVER['HTTP_USER_AGENT'] ), 'Mac OS' ) !== false;
|
||||
$cmd_key = $is_mac ? '⌘' : 'Ctrl';
|
||||
?>
|
||||
<?php esc_html_e( 'Save Settings', 'wp-agentic-writer' ); ?> <kbd class="ms-1 bg-dark text-white border-0 py-0"><?php echo esc_html( $cmd_key ); ?>+S</kbd>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -15,12 +15,12 @@ if ( ! defined( 'ABSPATH' ) ) {
|
||||
<div class="row g-4">
|
||||
<!-- Summary Stats -->
|
||||
<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="card border-0 ">
|
||||
<div class="card-header 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 Summary', 'wp-agentic-writer' ); ?></h5>
|
||||
<h5 class="card-title mb-1"><?php esc_html_e( 'OpenRouter Cost Summary', 'wp-agentic-writer' ); ?></h5>
|
||||
<p class="text-muted small mb-0"><?php esc_html_e( 'Overview of your API spending', 'wp-agentic-writer' ); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -58,12 +58,12 @@ if ( ! defined( 'ABSPATH' ) ) {
|
||||
|
||||
<!-- Filters -->
|
||||
<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="card border-0 ">
|
||||
<div class="card-header 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( 'Filter Cost Log', 'wp-agentic-writer' ); ?></h5>
|
||||
<h5 class="card-title mb-1"><?php esc_html_e( 'Filter OpenRouter Cost Log', 'wp-agentic-writer' ); ?></h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -110,13 +110,13 @@ if ( ! defined( 'ABSPATH' ) ) {
|
||||
|
||||
<!-- Cost Log Table -->
|
||||
<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="card border-0 ">
|
||||
<div class="card-header border-bottom-0 pt-4 pb-0">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<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( 'Detailed Cost Log', 'wp-agentic-writer' ); ?></h5>
|
||||
<h5 class="card-title mb-1"><?php esc_html_e( 'Detailed OpenRouter Cost Log', 'wp-agentic-writer' ); ?></h5>
|
||||
<p class="text-muted small mb-0" id="wpaw-records-info"><?php esc_html_e( 'Loading...', 'wp-agentic-writer' ); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -133,7 +133,7 @@ if ( ! defined( 'ABSPATH' ) ) {
|
||||
<tr>
|
||||
<th class="px-3" style="width: 50%;"><?php esc_html_e( 'Post Title', 'wp-agentic-writer' ); ?></th>
|
||||
<th class="text-center"><?php esc_html_e( 'API Calls', 'wp-agentic-writer' ); ?></th>
|
||||
<th class="text-end px-3"><?php esc_html_e( 'Total Cost', 'wp-agentic-writer' ); ?></th>
|
||||
<th class="text-end px-3"><?php esc_html_e( 'Total OpenRouter Cost', 'wp-agentic-writer' ); ?></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="wpaw-cost-log-tbody">
|
||||
|
||||
@@ -31,8 +31,8 @@ $available_languages = $settings_instance->get_available_languages();
|
||||
<div class="row g-4">
|
||||
<!-- API Configuration -->
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-white border-bottom-0 pt-3">
|
||||
<div class="card border-0 ">
|
||||
<div class="card-header border-bottom-0 pt-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div>
|
||||
<h5 class="card-title mb-1 d-flex align-items-center gap-2"><i class="bi bi-key-fill text-warning"></i><?php esc_html_e( 'API Configuration', 'wp-agentic-writer' ); ?></h5>
|
||||
@@ -71,11 +71,11 @@ $available_languages = $settings_instance->get_available_languages();
|
||||
|
||||
<!-- Budget & Cost Tracking -->
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-white border-bottom-0 pt-3">
|
||||
<div class="card border-0 ">
|
||||
<div class="card-header border-bottom-0 pt-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div>
|
||||
<h5 class="card-title mb-1 d-flex align-items-center gap-2"><i class="bi bi-currency-dollar text-warning"></i><?php esc_html_e( 'Budget & Cost Tracking', 'wp-agentic-writer' ); ?></h5>
|
||||
<h5 class="card-title mb-1 d-flex align-items-center gap-2"><i class="bi bi-currency-dollar text-warning"></i><?php esc_html_e( 'OpenRouter Budget & Cost Tracking', 'wp-agentic-writer' ); ?></h5>
|
||||
<p class="text-muted small mb-0"><?php esc_html_e( 'Monitor and control your API spending', 'wp-agentic-writer' ); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -84,13 +84,13 @@ $available_languages = $settings_instance->get_available_languages();
|
||||
<!-- Budget Overview -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 rounded bg-light text-center">
|
||||
<div class="p-3 rounded border text-center">
|
||||
<div class="fs-3 fw-bold text-primary">$<?php echo number_format( $monthly_used, 2 ); ?></div>
|
||||
<div class="text-muted small"><?php esc_html_e( 'Used This Month', 'wp-agentic-writer' ); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3">
|
||||
<div class="p-3 border">
|
||||
<div class="d-flex justify-content-between mb-1">
|
||||
<span class="small text-muted"><?php esc_html_e( 'Budget Usage', 'wp-agentic-writer' ); ?></span>
|
||||
<span class="small fw-semibold"><?php echo number_format( $budget_percent, 1 ); ?>%</span>
|
||||
@@ -104,7 +104,7 @@ $available_languages = $settings_instance->get_available_languages();
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 rounded bg-light text-center">
|
||||
<div class="p-3 rounded border text-center">
|
||||
<div class="fs-3 fw-bold text-success">$<?php echo number_format( max( 0, $monthly_budget - $monthly_used ), 2 ); ?></div>
|
||||
<div class="text-muted small"><?php esc_html_e( 'Remaining', 'wp-agentic-writer' ); ?></div>
|
||||
</div>
|
||||
@@ -122,7 +122,7 @@ $available_languages = $settings_instance->get_available_languages();
|
||||
<div class="form-text"><?php esc_html_e( 'Maximum spend per month. Set to 0 for unlimited.', 'wp-agentic-writer' ); ?></div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label fw-semibold"><?php esc_html_e( 'Cost Tracking', 'wp-agentic-writer' ); ?></label>
|
||||
<label class="form-label fw-semibold"><?php esc_html_e( 'OpenRouter Cost Tracking', 'wp-agentic-writer' ); ?></label>
|
||||
<div class="form-check form-switch d-flex align-items-center gap-2">
|
||||
<input class="form-check-input" type="checkbox" id="cost_tracking_enabled" name="wp_agentic_writer_settings[cost_tracking_enabled]" value="1" <?php checked( $cost_tracking_enabled ); ?> />
|
||||
<label class="form-check-label" for="cost_tracking_enabled">
|
||||
@@ -137,12 +137,12 @@ $available_languages = $settings_instance->get_available_languages();
|
||||
|
||||
<!-- Research & Web Search -->
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-white border-bottom-0 pt-3">
|
||||
<div class="card border-0 ">
|
||||
<div class="card-header border-bottom-0 pt-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div>
|
||||
<h5 class="card-title mb-1 d-flex align-items-center gap-2"><i class="bi bi-search text-warning"></i><?php esc_html_e( 'Research & Web Search', 'wp-agentic-writer' ); ?></h5>
|
||||
<p class="text-muted small mb-0"><?php esc_html_e( 'Configure web search for up-to-date content', 'wp-agentic-writer' ); ?></p>
|
||||
<p class="text-muted small mb-0"><?php esc_html_e( 'When enabled, the plugin auto-selects the search method based on your active provider.', 'wp-agentic-writer' ); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -152,19 +152,10 @@ $available_languages = $settings_instance->get_available_languages();
|
||||
<div class="form-check form-switch d-flex align-items-center gap-2">
|
||||
<input class="form-check-input" type="checkbox" id="web_search_enabled" name="wp_agentic_writer_settings[web_search_enabled]" value="1" <?php checked( $web_search_enabled ); ?> />
|
||||
<label class="form-check-label" for="web_search_enabled">
|
||||
<?php esc_html_e( 'Enable Web Search', 'wp-agentic-writer' ); ?>
|
||||
<span class="badge text-bg-warning ms-2">~$0.02 per search</span>
|
||||
<?php esc_html_e( 'Enable Web Search (default for new posts)', 'wp-agentic-writer' ); ?>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-text"><?php esc_html_e( 'Search the web for current information. Can be toggled per-request in sidebar.', 'wp-agentic-writer' ); ?></div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="search_engine" class="form-label fw-semibold"><?php esc_html_e( 'Search Engine', 'wp-agentic-writer' ); ?></label>
|
||||
<select class="form-select" id="search_engine" name="wp_agentic_writer_settings[search_engine]">
|
||||
<option value="auto" <?php selected( $search_engine, 'auto' ); ?>><?php esc_html_e( 'Auto (Native if available, Exa fallback)', 'wp-agentic-writer' ); ?></option>
|
||||
<option value="native" <?php selected( $search_engine, 'native' ); ?>><?php esc_html_e( 'Native (Provider\'s built-in search)', 'wp-agentic-writer' ); ?></option>
|
||||
<option value="exa" <?php selected( $search_engine, 'exa' ); ?>><?php esc_html_e( 'Exa (Always use Exa search)', 'wp-agentic-writer' ); ?></option>
|
||||
</select>
|
||||
<div class="form-text"><?php esc_html_e( 'Can also be toggled per-request in the editor sidebar.', 'wp-agentic-writer' ); ?></div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="search_depth" class="form-label fw-semibold"><?php esc_html_e( 'Search Depth', 'wp-agentic-writer' ); ?></label>
|
||||
@@ -175,14 +166,49 @@ $available_languages = $settings_instance->get_available_languages();
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Two-column: OpenRouter vs Brave -->
|
||||
<div class="row g-3 mt-4 border-top pt-4 border-secondary border-opacity-25">
|
||||
<!-- Left Column: OpenRouter Search -->
|
||||
<div class="col-md-6">
|
||||
<div class="p-3 border rounded" style="border-color: rgba(255,255,255,.1) !important">
|
||||
<h6 class="fw-semibold mb-1 d-flex align-items-center gap-2">
|
||||
<span class="badge text-bg-primary">OpenRouter</span>
|
||||
<?php esc_html_e( 'Search Engine', 'wp-agentic-writer' ); ?>
|
||||
</h6>
|
||||
<p class="text-muted small mb-2"><?php esc_html_e( 'Used when the active model is routed through OpenRouter.', 'wp-agentic-writer' ); ?></p>
|
||||
<select class="form-select" id="search_engine" name="wp_agentic_writer_settings[search_engine]">
|
||||
<option value="auto" <?php selected( $search_engine, 'auto' ); ?>><?php esc_html_e( 'Auto (Native → Exa fallback)', 'wp-agentic-writer' ); ?></option>
|
||||
<option value="native" <?php selected( $search_engine, 'native' ); ?>><?php esc_html_e( 'Native (Free, built-in)', 'wp-agentic-writer' ); ?></option>
|
||||
<option value="exa" <?php selected( $search_engine, 'exa' ); ?>><?php esc_html_e( 'Exa (Paid, ~$0.02/search)', 'wp-agentic-writer' ); ?></option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Brave Search -->
|
||||
<div class="col-md-6">
|
||||
<div class="p-3 border rounded" style="border-color: rgba(255,255,255,.1) !important">
|
||||
<h6 class="fw-semibold mb-1 d-flex align-items-center gap-2">
|
||||
<span class="badge text-bg-success">Local / Codex</span>
|
||||
<?php esc_html_e( 'Brave Search API', 'wp-agentic-writer' ); ?>
|
||||
</h6>
|
||||
<p class="text-muted small mb-2"><?php esc_html_e( 'Used automatically when the active model is Local Backend or Codex.', 'wp-agentic-writer' ); ?></p>
|
||||
<input type="password" class="form-control" id="brave_search_api_key" name="wp_agentic_writer_settings[brave_search_api_key]" value="<?php echo esc_attr( $brave_search_api_key ); ?>" placeholder="BSA...">
|
||||
<div class="form-text mt-2">
|
||||
<?php printf( wp_kses_post( __( '<a href="%s" target="_blank" class="text-info text-decoration-none border-bottom border-info">Get free API Key</a> — 2,000 requests/month on the free tier.', 'wp-agentic-writer' ) ), 'https://brave.com/search/api/' ); ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Clarification Quiz -->
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-white border-bottom-0 pt-3">
|
||||
<div class="card border-0 ">
|
||||
<div class="card-header border-bottom-0 pt-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div>
|
||||
<h5 class="card-title mb-1 d-flex align-items-center gap-2"><i class="bi bi-question-circle text-warning"></i><?php esc_html_e( 'Clarification Quiz', 'wp-agentic-writer' ); ?></h5>
|
||||
@@ -240,8 +266,8 @@ $available_languages = $settings_instance->get_available_languages();
|
||||
|
||||
<!-- Content Settings / Language -->
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-white border-bottom-0 pt-3">
|
||||
<div class="card border-0 ">
|
||||
<div class="card-header border-bottom-0 pt-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div>
|
||||
<h5 class="card-title mb-1 d-flex align-items-center gap-2"><i class="bi bi-globe text-warning"></i><?php esc_html_e( 'Content Settings', 'wp-agentic-writer' ); ?></h5>
|
||||
@@ -292,8 +318,8 @@ $available_languages = $settings_instance->get_available_languages();
|
||||
|
||||
<!-- Advanced Settings -->
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-white border-bottom-0 pt-3">
|
||||
<div class="card border-0 ">
|
||||
<div class="card-header border-bottom-0 pt-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div>
|
||||
<h5 class="card-title mb-1 d-flex align-items-center gap-2"><i class="bi bi-gear text-warning"></i><?php esc_html_e( 'Advanced Settings', 'wp-agentic-writer' ); ?></h5>
|
||||
@@ -303,6 +329,15 @@ $available_languages = $settings_instance->get_available_languages();
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-12">
|
||||
<div class="form-check form-switch d-flex align-items-center gap-2">
|
||||
<input class="form-check-input" type="checkbox" id="enable_faq_schema" name="wp_agentic_writer_settings[enable_faq_schema]" value="1" <?php checked( $enable_faq_schema ?? false ); ?> />
|
||||
<label class="form-check-label" for="enable_faq_schema">
|
||||
<?php esc_html_e( 'Enable Automated FAQ Schema (Optional)', 'wp-agentic-writer' ); ?>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-text"><?php esc_html_e( 'Automatically injects FAQPage JSON-LD into posts when Q&A headings are detected. Compatible with Yoast SEO and RankMath. Disable if your SEO plugin already handles FAQ schema.', 'wp-agentic-writer' ); ?></div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="chat_history_limit" class="form-label fw-semibold"><?php esc_html_e( 'Chat History Limit', 'wp-agentic-writer' ); ?></label>
|
||||
<input type="number" class="form-control" id="chat_history_limit" name="wp_agentic_writer_settings[chat_history_limit]" value="<?php echo esc_attr( $chat_history_limit ); ?>" min="0" max="200" style="max-width: 120px;" />
|
||||
|
||||
@@ -13,8 +13,8 @@ if ( ! defined( 'ABSPATH' ) ) {
|
||||
<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="card border-0 ">
|
||||
<div class="card-header border-bottom-0 pt-4 pb-0">
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="me-3 fs-4">📖</span>
|
||||
<div>
|
||||
@@ -86,8 +86,8 @@ if ( ! defined( 'ABSPATH' ) ) {
|
||||
|
||||
<!-- 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="card border-0 ">
|
||||
<div class="card-header border-bottom-0 pt-4 pb-0">
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="me-3 fs-4">⭐</span>
|
||||
<div>
|
||||
@@ -159,8 +159,8 @@ if ( ! defined( 'ABSPATH' ) ) {
|
||||
|
||||
<!-- 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="card border-0 ">
|
||||
<div class="card-header border-bottom-0 pt-4 pb-0">
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="me-3 fs-4">💡</span>
|
||||
<div>
|
||||
|
||||
307
views/settings/tab-local-backend.php
Normal file
307
views/settings/tab-local-backend.php
Normal file
@@ -0,0 +1,307 @@
|
||||
<?php
|
||||
/**
|
||||
* Settings Tab: Local Backend
|
||||
*
|
||||
* @package WP_Agentic_Writer
|
||||
* @var string $local_backend_url
|
||||
* @var string $local_backend_key
|
||||
* @var string $local_backend_model
|
||||
* @var bool $local_backend_enabled
|
||||
*/
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
?>
|
||||
|
||||
<div class="row g-4">
|
||||
<!-- Download Package -->
|
||||
<div class="col-12">
|
||||
<div class="card border-0">
|
||||
<div class="card-header border-bottom-0 pt-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div>
|
||||
<h5 class="card-title mb-1 d-flex align-items-center gap-2">
|
||||
<i class="bi bi-download text-primary"></i>
|
||||
<?php esc_html_e( 'Step 1: Download Local Backend Package', 'wp-agentic-writer' ); ?>
|
||||
</h5>
|
||||
<p class="text-muted small mb-0">
|
||||
<?php esc_html_e( 'Run AI inference on your own machine with your Claude CLI + Z.ai account', 'wp-agentic-writer' ); ?>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="mb-3">
|
||||
<?php esc_html_e( 'Download the Local Backend proxy to run on your development machine. This allows unlimited, private AI content generation using your existing Claude CLI setup.', 'wp-agentic-writer' ); ?>
|
||||
</p>
|
||||
<a href="<?php echo esc_url( WP_AGENTIC_WRITER_URL . 'downloads/agentic-writer-local-backend.zip' ); ?>"
|
||||
class="btn btn-primary btn-lg" download>
|
||||
<i class="bi bi-download me-2"></i>
|
||||
<?php esc_html_e( 'Download Local Backend v1.0.0', 'wp-agentic-writer' ); ?>
|
||||
</a>
|
||||
|
||||
<details class="mt-3">
|
||||
<summary class="fw-semibold" style="cursor: pointer;">
|
||||
<?php esc_html_e( 'Prerequisites', 'wp-agentic-writer' ); ?>
|
||||
</summary>
|
||||
<ul class="mt-2">
|
||||
<li>
|
||||
✅ <strong><?php esc_html_e( 'Claude CLI', 'wp-agentic-writer' ); ?></strong> -
|
||||
<?php esc_html_e( 'Get from', 'wp-agentic-writer' ); ?>
|
||||
<a href="https://claude.ai/code" target="_blank">claude.ai/code</a>
|
||||
<?php esc_html_e( 'or', 'wp-agentic-writer' ); ?>
|
||||
<a href="https://z.ai" target="_blank">z.ai</a>
|
||||
</li>
|
||||
<li>
|
||||
✅ <strong><?php esc_html_e( 'Node.js 18+', 'wp-agentic-writer' ); ?></strong> -
|
||||
<a href="https://nodejs.org" target="_blank"><?php esc_html_e( 'Download', 'wp-agentic-writer' ); ?></a>
|
||||
</li>
|
||||
<li>
|
||||
✅ <strong><?php esc_html_e( 'Z.ai Coding Plan or Anthropic API key', 'wp-agentic-writer' ); ?></strong> -
|
||||
<?php esc_html_e( 'Configured in Claude CLI', 'wp-agentic-writer' ); ?>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Configuration -->
|
||||
<div class="col-12">
|
||||
<div class="card border-0 ">
|
||||
<div class="card-header border-bottom-0 pt-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div>
|
||||
<h5 class="card-title mb-1 d-flex align-items-center gap-2">
|
||||
<i class="bi bi-gear-fill text-success"></i>
|
||||
<?php esc_html_e( 'Step 2: Configure Connection', 'wp-agentic-writer' ); ?>
|
||||
</h5>
|
||||
<p class="text-muted small mb-0">
|
||||
<?php esc_html_e( 'After starting the proxy, enter the connection details here', 'wp-agentic-writer' ); ?>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label for="local_backend_url" class="form-label fw-semibold">
|
||||
<?php esc_html_e( 'Base URL', 'wp-agentic-writer' ); ?>
|
||||
<span class="text-danger ms-2">*</span>
|
||||
</label>
|
||||
<input type="url"
|
||||
class="form-control"
|
||||
id="local_backend_url"
|
||||
name="wp_agentic_writer_settings[local_backend_url]"
|
||||
value="<?php echo esc_attr( $local_backend_url ); ?>"
|
||||
placeholder="http://192.168.1.105:8080">
|
||||
<div class="form-text">
|
||||
<?php esc_html_e( 'Enter the URL from your Local Backend startup message (e.g., http://YOUR-IP:8080)', 'wp-agentic-writer' ); ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="local_backend_key" class="form-label fw-semibold">
|
||||
<?php esc_html_e( 'API Key', 'wp-agentic-writer' ); ?>
|
||||
</label>
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
id="local_backend_key"
|
||||
name="wp_agentic_writer_settings[local_backend_key]"
|
||||
value="<?php echo esc_attr( $local_backend_key ); ?>"
|
||||
placeholder="dummy">
|
||||
<div class="form-text">
|
||||
<?php esc_html_e( 'Use "dummy" for local backend (ignored by proxy)', 'wp-agentic-writer' ); ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="local_backend_model" class="form-label fw-semibold">
|
||||
<?php esc_html_e( 'Model', 'wp-agentic-writer' ); ?>
|
||||
</label>
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
id="local_backend_model"
|
||||
name="wp_agentic_writer_settings[local_backend_model]"
|
||||
value="<?php echo esc_attr( $local_backend_model ); ?>"
|
||||
placeholder="claude-local">
|
||||
<div class="form-text">
|
||||
<?php esc_html_e( 'Model identifier (informational only, proxy uses your Claude CLI default)', 'wp-agentic-writer' ); ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-2 align-items-center">
|
||||
<button type="button" id="test-local-backend" class="btn btn-outline-primary">
|
||||
<i class="bi bi-plug me-2"></i>
|
||||
<?php esc_html_e( 'Test Connection', 'wp-agentic-writer' ); ?>
|
||||
</button>
|
||||
<span id="connection-status" class="ms-2"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Task Routing (Optional) -->
|
||||
<div class="col-12">
|
||||
<div class="card border-0 ">
|
||||
<div class="card-header border-bottom-0 pt-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div>
|
||||
<h5 class="card-title mb-1 d-flex align-items-center gap-2">
|
||||
<i class="bi bi-diagram-3 text-warning"></i>
|
||||
<?php esc_html_e( 'Step 3: Provider Routing (Advanced)', 'wp-agentic-writer' ); ?>
|
||||
</h5>
|
||||
<p class="text-muted small mb-0">
|
||||
<?php esc_html_e( 'Choose which provider to use for each task type', 'wp-agentic-writer' ); ?>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="alert alert-info mb-3">
|
||||
<i class="bi bi-info-circle me-2"></i>
|
||||
<strong><?php esc_html_e( 'Recommended Setup:', 'wp-agentic-writer' ); ?></strong>
|
||||
<?php esc_html_e( 'Use Local Backend for all text tasks (free, fast, private). Use OpenRouter for images (only option).', 'wp-agentic-writer' ); ?>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
$task_types = array(
|
||||
'chat' => __( 'Chat & Discussion', 'wp-agentic-writer' ),
|
||||
'clarity' => __( 'Clarity Check & Quiz', 'wp-agentic-writer' ),
|
||||
'planning' => __( 'Outline Planning', 'wp-agentic-writer' ),
|
||||
'writing' => __( 'Article Writing', 'wp-agentic-writer' ),
|
||||
'refinement' => __( 'Content Refinement', 'wp-agentic-writer' ),
|
||||
'image' => __( 'Image Generation', 'wp-agentic-writer' ),
|
||||
);
|
||||
|
||||
$task_providers = $settings['task_providers'] ?? array();
|
||||
?>
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><?php esc_html_e( 'Task Type', 'wp-agentic-writer' ); ?></th>
|
||||
<th><?php esc_html_e( 'Provider', 'wp-agentic-writer' ); ?></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach ( $task_types as $task_key => $task_label ) : ?>
|
||||
<tr>
|
||||
<td><?php echo esc_html( $task_label ); ?></td>
|
||||
<td>
|
||||
<select class="form-select form-select-sm"
|
||||
name="wp_agentic_writer_settings[task_providers][<?php echo esc_attr( $task_key ); ?>]">
|
||||
<?php
|
||||
$current_provider = $task_providers[ $task_key ] ?? 'openrouter';
|
||||
|
||||
// Available providers per task
|
||||
$providers = array(
|
||||
'openrouter' => '☁️ OpenRouter (Cloud)',
|
||||
);
|
||||
|
||||
// Add local backend for text tasks
|
||||
if ( 'image' !== $task_key ) {
|
||||
$providers['local_backend'] = '🏠 Local Backend (Free)';
|
||||
$providers['codex'] = '🔗 Codex (OpenAI)';
|
||||
}
|
||||
|
||||
foreach ( $providers as $provider_key => $provider_label ) :
|
||||
?>
|
||||
<option value="<?php echo esc_attr( $provider_key ); ?>"
|
||||
<?php selected( $current_provider, $provider_key ); ?>>
|
||||
<?php echo esc_html( $provider_label ); ?>
|
||||
</option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Help -->
|
||||
<div class="col-12">
|
||||
<div class="card border-0 border-warning">
|
||||
<div class="card-header border-bottom-0 pt-3">
|
||||
<h5 class="card-title mb-0 d-flex align-items-center gap-2">
|
||||
<i class="bi bi-question-circle text-warning"></i>
|
||||
<?php esc_html_e( 'Troubleshooting', 'wp-agentic-writer' ); ?>
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="mb-0">
|
||||
<li>
|
||||
<strong><?php esc_html_e( 'Connection failed?', 'wp-agentic-writer' ); ?></strong>
|
||||
<?php esc_html_e( 'Ensure proxy is running:', 'wp-agentic-writer' ); ?>
|
||||
<code>./start-proxy.sh</code>
|
||||
</li>
|
||||
<li>
|
||||
<strong><?php esc_html_e( 'Wrong IP?', 'wp-agentic-writer' ); ?></strong>
|
||||
<?php esc_html_e( 'Run', 'wp-agentic-writer' ); ?>
|
||||
<code>./get-local-ip.sh</code>
|
||||
<?php esc_html_e( 'to find correct address', 'wp-agentic-writer' ); ?>
|
||||
</li>
|
||||
<li>
|
||||
<strong><?php esc_html_e( 'Firewall blocking?', 'wp-agentic-writer' ); ?></strong>
|
||||
<?php esc_html_e( 'Allow Node.js on port 8080 in your system firewall', 'wp-agentic-writer' ); ?>
|
||||
</li>
|
||||
<li>
|
||||
<strong><?php esc_html_e( 'Claude not found?', 'wp-agentic-writer' ); ?></strong>
|
||||
<?php esc_html_e( 'Check Claude CLI:', 'wp-agentic-writer' ); ?>
|
||||
<code>which claude</code>
|
||||
<?php esc_html_e( 'or', 'wp-agentic-writer' ); ?>
|
||||
<code>claude --version</code>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="mt-3 mb-0">
|
||||
<strong><?php esc_html_e( 'Need help?', 'wp-agentic-writer' ); ?></strong>
|
||||
<?php esc_html_e( 'Check the README.md and TROUBLESHOOTING.md files in the downloaded package.', 'wp-agentic-writer' ); ?>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
$('#test-local-backend').on('click', function() {
|
||||
const btn = $(this);
|
||||
const status = $('#connection-status');
|
||||
const url = $('#local_backend_url').val();
|
||||
|
||||
if (!url) {
|
||||
status.html('<span class="text-warning">⚠️ Enter Base URL first</span>');
|
||||
return;
|
||||
}
|
||||
|
||||
btn.prop('disabled', true).html('<i class="spinner-border spinner-border-sm me-2"></i>Testing...');
|
||||
status.html('<span class="text-white" style="color:#17a2b8 !important;">⏳ Connecting...</span>');
|
||||
|
||||
$.ajax({
|
||||
url: ajaxurl,
|
||||
method: 'POST',
|
||||
data: {
|
||||
action: 'wpaw_test_local_backend',
|
||||
url: url,
|
||||
nonce: '<?php echo esc_js( wp_create_nonce( 'wpaw_test_local_backend' ) ); ?>'
|
||||
},
|
||||
success: function(response) {
|
||||
if (response.success) {
|
||||
status.html('<span class="text-success">✅ ' + response.data.message + '</span>');
|
||||
} else {
|
||||
status.html('<span class="text-danger">❌ ' + (response.data.message || 'Failed') + '</span>');
|
||||
}
|
||||
},
|
||||
error: function(xhr) {
|
||||
status.html('<span class="text-danger">❌ Connection failed. Check URL and proxy status.</span>');
|
||||
},
|
||||
complete: function() {
|
||||
btn.prop('disabled', false).html('<i class="bi bi-plug me-2"></i><?php esc_html_e( 'Test Connection', 'wp-agentic-writer' ); ?>');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -15,13 +15,26 @@
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
if ( ! function_exists( 'wpaw_get_provider_badge' ) ) {
|
||||
function wpaw_get_provider_badge( $task, $task_providers ) {
|
||||
$provider = $task_providers[ $task ] ?? ( 'image' === $task ? 'openrouter' : 'openrouter' );
|
||||
if ( 'local_backend' === $provider ) {
|
||||
return '<span class="badge border border-secondary text-secondary ms-2 align-middle" style="font-size: 0.65rem;"><i class="bi bi-hdd-network me-1"></i>Local Backend</span>';
|
||||
} elseif ( 'codex' === $provider ) {
|
||||
return '<span class="badge border border-secondary text-secondary ms-2 align-middle" style="font-size: 0.65rem;"><i class="bi bi-code-slash me-1"></i>Codex</span>';
|
||||
} else {
|
||||
return '<span class="badge border border-secondary text-secondary ms-2 align-middle" style="font-size: 0.65rem;"><i class="bi bi-cloud me-1"></i>OpenRouter</span>';
|
||||
}
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
||||
<div class="row g-4">
|
||||
<!-- Quick Presets -->
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-white border-bottom-0 pt-3">
|
||||
<div class="card border-0 ">
|
||||
<div class="card-header border-bottom-0 pt-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div>
|
||||
<h5 class="card-title mb-1 d-flex align-items-center gap-2"><i class="bi bi-lightning-fill text-warning"></i><?php esc_html_e( 'Quick Presets', 'wp-agentic-writer' ); ?></h5>
|
||||
@@ -33,7 +46,7 @@ if ( ! defined( 'ABSPATH' ) ) {
|
||||
<div class="row g-3">
|
||||
<!-- Budget Preset -->
|
||||
<div class="col-md-4">
|
||||
<div class="card border-2 preset-card" data-preset="budget" role="button" tabindex="0">
|
||||
<div class="card border-2 border-secondary preset-card" data-preset="budget" role="button" tabindex="0" style="border:1px solid var(--wpaw-border) !important;">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<h6 class="card-title mb-0"><?php esc_html_e( 'Budget', 'wp-agentic-writer' ); ?></h6>
|
||||
@@ -42,14 +55,14 @@ if ( ! defined( 'ABSPATH' ) ) {
|
||||
<div class="small text-muted">
|
||||
<div><strong>Chat/Clarity/Planning/Refinement:</strong> Gemini 2.5 Flash</div>
|
||||
<div><strong>Writing:</strong> Mistral Small Creative</div>
|
||||
<div><strong>Image:</strong> GPT-4o</div>
|
||||
<div><strong>Image:</strong> FLUX.2 klein</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Balanced Preset -->
|
||||
<div class="col-md-4">
|
||||
<div class="card border-2 border-primary preset-card" data-preset="balanced" role="button" tabindex="0">
|
||||
<div class="card border-2 border-primary preset-card" data-preset="balanced" role="button" tabindex="0" style="border:1px solid var(--wpaw-border) !important;">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<h6 class="card-title mb-0"><?php esc_html_e( 'Balanced', 'wp-agentic-writer' ); ?></h6>
|
||||
@@ -58,14 +71,14 @@ if ( ! defined( 'ABSPATH' ) ) {
|
||||
<div class="small text-muted">
|
||||
<div><strong>Chat/Clarity/Planning:</strong> Gemini 2.5 Flash</div>
|
||||
<div><strong>Writing/Refinement:</strong> Claude 3.5 Sonnet</div>
|
||||
<div><strong>Image:</strong> GPT-4o</div>
|
||||
<div><strong>Image:</strong> Riverflow V2 Max</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Premium Preset -->
|
||||
<div class="col-md-4">
|
||||
<div class="card border-2 preset-card" data-preset="premium" role="button" tabindex="0">
|
||||
<div class="card border-2 border-secondary preset-card" data-preset="premium" role="button" tabindex="0" style="border:1px solid var(--wpaw-border) !important;">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<h6 class="card-title mb-0"><?php esc_html_e( 'Premium', 'wp-agentic-writer' ); ?></h6>
|
||||
@@ -75,7 +88,7 @@ if ( ! defined( 'ABSPATH' ) ) {
|
||||
<div><strong>Chat/Planning:</strong> Gemini 3 Flash Preview</div>
|
||||
<div><strong>Clarity:</strong> Claude Sonnet 4</div>
|
||||
<div><strong>Writing/Refinement:</strong> GPT-4.1</div>
|
||||
<div><strong>Image:</strong> GPT-4o</div>
|
||||
<div><strong>Image:</strong> FLUX.2 max</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -87,8 +100,8 @@ if ( ! defined( 'ABSPATH' ) ) {
|
||||
|
||||
<!-- Individual Model Selectors -->
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-white border-bottom-0 pt-3">
|
||||
<div class="card border-0 ">
|
||||
<div class="card-header border-bottom-0 pt-3">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div class="d-flex align-items-center">
|
||||
<div>
|
||||
@@ -112,6 +125,7 @@ if ( ! defined( 'ABSPATH' ) ) {
|
||||
<label for="chat_model" class="form-label fw-semibold">
|
||||
<?php esc_html_e( 'Chat Model', 'wp-agentic-writer' ); ?>
|
||||
<span class="badge bg-info-subtle text-info ms-2">Discussion</span>
|
||||
<?php echo wpaw_get_provider_badge( 'chat', $task_providers ?? array() ); ?>
|
||||
</label>
|
||||
<select id="chat_model" name="wp_agentic_writer_settings[chat_model]" class="form-select wpaw-select2-model" data-model-type="chat">
|
||||
<option value="<?php echo esc_attr( $chat_model ); ?>"><?php echo esc_html( $chat_model ); ?></option>
|
||||
@@ -124,6 +138,7 @@ if ( ! defined( 'ABSPATH' ) ) {
|
||||
<label for="clarity_model" class="form-label fw-semibold">
|
||||
<?php esc_html_e( 'Clarity Model', 'wp-agentic-writer' ); ?>
|
||||
<span class="badge bg-info-subtle text-info ms-2">Analysis</span>
|
||||
<?php echo wpaw_get_provider_badge( 'clarity', $task_providers ?? array() ); ?>
|
||||
</label>
|
||||
<select id="clarity_model" name="wp_agentic_writer_settings[clarity_model]" class="form-select wpaw-select2-model" data-model-type="clarity">
|
||||
<option value="<?php echo esc_attr( $clarity_model ); ?>"><?php echo esc_html( $clarity_model ); ?></option>
|
||||
@@ -136,6 +151,7 @@ if ( ! defined( 'ABSPATH' ) ) {
|
||||
<label for="planning_model" class="form-label fw-semibold">
|
||||
<?php esc_html_e( 'Planning Model', 'wp-agentic-writer' ); ?>
|
||||
<span class="badge bg-info-subtle text-info ms-2">Outline</span>
|
||||
<?php echo wpaw_get_provider_badge( 'planning', $task_providers ?? array() ); ?>
|
||||
</label>
|
||||
<select id="planning_model" name="wp_agentic_writer_settings[planning_model]" class="form-select wpaw-select2-model" data-model-type="planning">
|
||||
<option value="<?php echo esc_attr( $planning_model ); ?>"><?php echo esc_html( $planning_model ); ?></option>
|
||||
@@ -148,6 +164,7 @@ if ( ! defined( 'ABSPATH' ) ) {
|
||||
<label for="writing_model" class="form-label fw-semibold">
|
||||
<?php esc_html_e( 'Writing Model', 'wp-agentic-writer' ); ?>
|
||||
<span class="badge bg-primary ms-2">Main Writer</span>
|
||||
<?php echo wpaw_get_provider_badge( 'writing', $task_providers ?? array() ); ?>
|
||||
</label>
|
||||
<select id="writing_model" name="wp_agentic_writer_settings[writing_model]" class="form-select wpaw-select2-model" data-model-type="execution">
|
||||
<option value="<?php echo esc_attr( $writing_model ); ?>"><?php echo esc_html( $writing_model ); ?></option>
|
||||
@@ -160,6 +177,7 @@ if ( ! defined( 'ABSPATH' ) ) {
|
||||
<label for="refinement_model" class="form-label fw-semibold">
|
||||
<?php esc_html_e( 'Refinement Model', 'wp-agentic-writer' ); ?>
|
||||
<span class="badge bg-info text-info ms-2">Editing</span>
|
||||
<?php echo wpaw_get_provider_badge( 'refinement', $task_providers ?? array() ); ?>
|
||||
</label>
|
||||
<select id="refinement_model" name="wp_agentic_writer_settings[refinement_model]" class="form-select wpaw-select2-model" data-model-type="execution">
|
||||
<option value="<?php echo esc_attr( $refinement_model ); ?>"><?php echo esc_html( $refinement_model ); ?></option>
|
||||
@@ -172,6 +190,7 @@ if ( ! defined( 'ABSPATH' ) ) {
|
||||
<label for="image_model" class="form-label fw-semibold">
|
||||
<?php esc_html_e( 'Image Model', 'wp-agentic-writer' ); ?>
|
||||
<span class="badge text-bg-warning ms-2">Visual</span>
|
||||
<?php echo wpaw_get_provider_badge( 'image', $task_providers ?? array() ); ?>
|
||||
</label>
|
||||
<select id="image_model" name="wp_agentic_writer_settings[image_model]" class="form-select wpaw-select2-model" data-model-type="image">
|
||||
<option value="<?php echo esc_attr( $image_model ); ?>"><?php echo esc_html( $image_model ); ?></option>
|
||||
@@ -252,7 +271,7 @@ if ( ! defined( 'ABSPATH' ) ) {
|
||||
<div class="mt-4 p-4 bg-dark rounded-3">
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h6 class="mb-1"><?php esc_html_e( 'Estimated Cost Per Article', 'wp-agentic-writer' ); ?></h6>
|
||||
<h6 class="mb-1"><?php esc_html_e( 'Estimated OpenRouter Cost Per Article', 'wp-agentic-writer' ); ?></h6>
|
||||
<p class="text-muted small mb-0"><?php esc_html_e( 'Based on ~2K planning tokens, ~4K execution tokens, and 1 image.', 'wp-agentic-writer' ); ?></p>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
|
||||
Reference in New Issue
Block a user