first commit all files
This commit is contained in:
dwindown
267
views/settings/tab-models.php
Normal file
267
views/settings/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> GPT-4o</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> GPT-4o</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> GPT-4o</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>
|
||||
Reference in New Issue
Block a user