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
2026-05-17 10:48:05 +07:00
parent 97426d5ab1
commit d2c10756ab
61 changed files with 18725 additions and 806 deletions

View File

@@ -3,7 +3,7 @@
* Bootstrap-based settings page JavaScript
*/
(function($) {
(function ($) {
'use strict';
// Global state
@@ -49,14 +49,14 @@
};
// Debug function to check models
window.wpawDebugModels = function() {
window.wpawDebugModels = function () {
console.log('=== WPAW Models Debug ===');
console.log('Total model categories:', Object.keys(state.models).length);
Object.keys(state.models).forEach(category => {
const models = state.models[category]?.all || [];
console.log(`\n${category.toUpperCase()}: ${models.length} models`);
// Check for specific models
const checkIds = ['deepseek/deepseek-chat-v3-0324', 'anthropic/claude-3.5-sonnet'];
checkIds.forEach(id => {
@@ -67,7 +67,7 @@
console.log(` ✗ NOT FOUND: ${id}`);
}
});
// Show models with raw is_free and pricing data
if (category === 'image') {
console.log(` ALL image models (raw data from PHP):`);
@@ -82,7 +82,7 @@
});
}
});
// AJAX debug call
console.log('\n=== Fetching from server ===');
$.ajax({
@@ -92,7 +92,7 @@
action: 'wpaw_debug_models',
nonce: wpawSettingsV2.nonce
},
success: function(response) {
success: function (response) {
if (response.success) {
console.log('Server response:', response.data);
console.log('Total models from API:', response.data.total_models);
@@ -103,14 +103,14 @@
console.error('Error:', response.data.message);
}
},
error: function(xhr, status, error) {
error: function (xhr, status, error) {
console.error('AJAX error:', error);
}
});
};
// Initialize when document is ready
$(document).ready(function() {
$(document).ready(function () {
initSelect2();
initApiKeyToggle();
initCustomLanguages();
@@ -120,7 +120,12 @@
initFormSave();
initCustomModels();
updateCostEstimate();
// Update cost when provider routing changes
$('select[name^="wp_agentic_writer_settings[task_providers]"]').on('change', function () {
updateCostEstimate();
});
// Log debug info
console.log('WPAW Settings V2 loaded. Run wpawDebugModels() to debug model issues.');
});
@@ -133,7 +138,7 @@
state.models = wpawSettingsV2.models || {};
$('.wpaw-select2-model').each(function() {
$('.wpaw-select2-model').each(function () {
const $select = $(this);
const modelType = $select.data('model-type') || 'execution';
const models = getModelsForType(modelType);
@@ -151,7 +156,7 @@
templateResult: formatModelOption,
templateSelection: formatModelSelection,
language: {
noResults: function() {
noResults: function () {
return wpawSettingsV2.i18n.noResults || 'No models found';
}
}
@@ -170,7 +175,7 @@
}
// Update cost estimate on change
$select.on('change', function() {
$select.on('change', function () {
updateCostEstimate();
});
});
@@ -183,11 +188,11 @@
if (type === 'clarity' || type === 'refinement' || type === 'chat') {
return state.models.execution?.all || state.models.planning?.all || [];
}
// Merge 'all' and 'recommended' arrays for complete model list
const allModels = state.models[type]?.all || [];
const recommended = state.models[type]?.recommended || [];
// Combine and deduplicate by id
const combined = [...allModels];
recommended.forEach(model => {
@@ -195,7 +200,7 @@
combined.push(model);
}
});
return combined;
}
@@ -236,7 +241,7 @@
const promptPrice = parseFloat(model.pricing?.prompt) || 0;
const imagePrice = parseFloat(model.pricing?.image) || 0;
const price = imagePrice > 0 ? imagePrice : promptPrice;
if (price > 0) {
const cost = (price * 1000000).toFixed(2);
const $cost = $('<span class="text-muted small ms-2"></span>').text(`$${cost}/1M`);
@@ -259,7 +264,7 @@
* Initialize preset cards
*/
function initPresets() {
$('.preset-card').on('click keypress', function(e) {
$('.preset-card').on('click keypress', function (e) {
if (e.type === 'keypress' && e.which !== 13) return;
const preset = $(this).data('preset');
@@ -313,7 +318,7 @@
* Initialize API key visibility toggle
*/
function initApiKeyToggle() {
$('#wpaw-toggle-api-key').on('click', function() {
$('#wpaw-toggle-api-key').on('click', function () {
const $input = $('#openrouter_api_key');
const type = $input.attr('type');
$input.attr('type', type === 'password' ? 'text' : 'password');
@@ -322,17 +327,17 @@
.toggleClass('bi-eye-slash', type === 'password');
});
$('#wpaw-test-api-key').on('click', function() {
$('#wpaw-test-api-key').on('click', function () {
const apiKey = $('#openrouter_api_key').val();
if (!apiKey) {
showToast('Please enter an API key first', 'warning');
return;
}
const $btn = $(this);
const originalText = $btn.html();
$btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-2"></span>Testing...');
$.ajax({
url: wpawSettingsV2.ajaxUrl,
type: 'POST',
@@ -340,17 +345,17 @@
action: 'wpaw_test_api_connection',
nonce: wpawSettingsV2.nonce
},
success: function(response) {
success: function (response) {
if (response.success) {
showToast(response.data.message + ' (' + response.data.models_count + ' models available)', 'success');
} else {
showToast(response.data.message || 'API test failed', 'danger');
}
},
error: function() {
error: function () {
showToast('Failed to test API connection', 'danger');
},
complete: function() {
complete: function () {
$btn.prop('disabled', false).html(originalText);
}
});
@@ -361,7 +366,7 @@
* Initialize custom languages management
*/
function initCustomLanguages() {
$('#wpaw-add-custom-language').on('click', function() {
$('#wpaw-add-custom-language').on('click', function () {
const html = `
<div class="input-group mb-2 wpaw-custom-language-item">
<input type="text" class="form-control" name="wp_agentic_writer_settings[custom_languages][]" value="" placeholder="e.g., Betawi, Minangkabau" />
@@ -373,7 +378,7 @@
$('#wpaw-custom-languages-list').append(html);
});
$(document).on('click', '.wpaw-remove-language', function() {
$(document).on('click', '.wpaw-remove-language', function () {
$(this).closest('.wpaw-custom-language-item').remove();
});
}
@@ -383,9 +388,9 @@
*/
function initCostLog() {
console.log('Initializing cost log...');
// Load on tab show
$('#cost-log-tab').on('shown.bs.tab', function() {
$('#cost-log-tab').on('shown.bs.tab', function () {
console.log('Cost log tab shown, loading data...');
loadCostLogData();
});
@@ -397,7 +402,7 @@
}
// Filter controls
$('#wpaw-apply-filters').on('click', function() {
$('#wpaw-apply-filters').on('click', function () {
state.filters = {
post: $('#wpaw-filter-post').val(),
model: $('#wpaw-filter-model').val(),
@@ -409,7 +414,7 @@
loadCostLogData();
});
$('#wpaw-clear-filters').on('click', function() {
$('#wpaw-clear-filters').on('click', function () {
$('#wpaw-filter-post').val('');
$('#wpaw-filter-model').val('');
$('#wpaw-filter-type').val('');
@@ -420,7 +425,7 @@
loadCostLogData();
});
$('#wpaw-per-page').on('change', function() {
$('#wpaw-per-page').on('change', function () {
state.perPage = parseInt($(this).val()) || 25;
state.currentPage = 1;
loadCostLogData();
@@ -430,7 +435,7 @@
$('#wpaw-export-csv').on('click', exportCostLogCSV);
// Pagination clicks
$(document).on('click', '#wpaw-pagination .page-link', function(e) {
$(document).on('click', '#wpaw-pagination .page-link', function (e) {
e.preventDefault();
const page = $(this).data('page');
if (page && page !== state.currentPage) {
@@ -447,10 +452,10 @@
console.log('loadCostLogData called');
console.log('wpawSettingsV2:', wpawSettingsV2);
console.log('State:', state);
const $tbody = $('#wpaw-cost-log-tbody');
console.log('Table tbody found:', $tbody.length);
$tbody.html(`
<tr>
<td colspan="7" class="text-center py-5">
@@ -472,14 +477,14 @@
filter_date_from: state.filters.dateFrom,
filter_date_to: state.filters.dateTo
};
console.log('AJAX request data:', ajaxData);
$.ajax({
url: wpawSettingsV2.ajaxUrl,
type: 'POST',
data: ajaxData,
success: function(response) {
success: function (response) {
console.log('Cost log response:', response);
if (response.success) {
renderCostLogTable(response.data);
@@ -492,7 +497,7 @@
$tbody.html('<tr><td colspan="7" class="text-center py-4 text-danger">' + escapeHtml(errorMsg) + '</td></tr>');
}
},
error: function(xhr, status, error) {
error: function (xhr, status, error) {
console.error('Cost log AJAX error:', status, error);
console.error('XHR:', xhr);
console.error('Response text:', xhr.responseText);
@@ -579,7 +584,7 @@
$tbody.html(html);
// Add collapse event listeners to rotate icon
$('.wpaw-group-row').on('click', function() {
$('.wpaw-group-row').on('click', function () {
const $icon = $(this).find('.wpaw-collapse-icon');
setTimeout(() => {
const target = $(this).data('bs-target');
@@ -696,15 +701,15 @@
// Headers
const headers = [];
table.find('thead th').each(function() {
table.find('thead th').each(function () {
headers.push($(this).text().trim());
});
rows.push(headers.join(','));
// Data rows
table.find('tbody tr').each(function() {
table.find('tbody tr').each(function () {
const row = [];
$(this).find('td').each(function() {
$(this).find('td').each(function () {
let text = $(this).text().trim().replace(/"/g, '""');
row.push('"' + text + '"');
});
@@ -732,7 +737,7 @@
* Initialize refresh models button
*/
function initRefreshModels() {
$('#wpaw-refresh-models').on('click', function() {
$('#wpaw-refresh-models').on('click', function () {
const $btn = $(this);
const $spinner = $('#wpaw-models-spinner');
const $message = $('#wpaw-models-message');
@@ -747,29 +752,29 @@
action: 'wpaw_refresh_models',
nonce: wpawSettingsV2.nonce
},
success: function(response) {
success: function (response) {
if (response.success) {
// Update both state and wpawSettingsV2 with new models
state.models = response.data.models;
wpawSettingsV2.models = response.data.models;
// Destroy all Select2 instances
$('.wpaw-select2-model').each(function() {
$('.wpaw-select2-model').each(function () {
$(this).select2('destroy');
});
// Reinitialize Select2 with new models
initSelect2();
showToast(response.data.message || 'Models refreshed!', 'success');
} else {
showToast(response.data?.message || 'Failed to refresh models', 'danger');
}
},
error: function() {
error: function () {
showToast('Failed to refresh models', 'danger');
},
complete: function() {
complete: function () {
$btn.prop('disabled', false);
$spinner.addClass('d-none');
}
@@ -781,7 +786,7 @@
* Initialize form save handling
*/
function initFormSave() {
$('#wpaw-reset-settings').on('click', function() {
$('#wpaw-reset-settings').on('click', function () {
if (confirm(wpawSettingsV2.i18n.confirmReset || 'Are you sure you want to reset all settings to defaults?')) {
// Apply balanced preset as default
applyPreset('balanced');
@@ -799,10 +804,17 @@
const planningModel = $('#planning_model').val();
const writingModel = $('#writing_model').val();
// Get advanced provider routing
const writingProvider = $('select[name="wp_agentic_writer_settings[task_providers][writing]"]').val();
let estimate = 0.10; // Default balanced estimate
if (writingModel) {
if (writingModel.includes('mistral') || writingModel.includes('gemini')) {
if (writingProvider && writingProvider !== 'openrouter') {
estimate = 0.00; // Local and Codex are free
} else if (writingModel) {
if (writingModel.includes('local') || writingModel === 'claude-local' || writingModel === 'llama-local') {
estimate = 0.00;
} else if (writingModel.includes('mistral') || writingModel.includes('gemini')) {
estimate = 0.06;
} else if (writingModel.includes('gpt-4.1') || writingModel.includes('opus')) {
estimate = 0.31;
@@ -811,7 +823,7 @@
}
}
$('#wpaw-cost-estimate').text('~$' + estimate.toFixed(2));
$('#wpaw-cost-estimate').text(estimate === 0 ? '$0.00 (Free)' : '~$' + estimate.toFixed(2));
}
/**
@@ -855,51 +867,51 @@
let customModelIndex = $('#wpaw-custom-models-list .custom-model-row').length;
// Add new custom model row
$('#wpaw-add-custom-model').on('click', function() {
$('#wpaw-add-custom-model').on('click', function () {
const template = $('#wpaw-custom-model-template').html();
const newRow = template.replace(/__INDEX__/g, customModelIndex);
$('#wpaw-custom-models-list').append(newRow);
customModelIndex++;
// Focus the new model ID input
$('#wpaw-custom-models-list .custom-model-row:last input:first').focus();
});
// Auto-save on blur from model ID input
$('#wpaw-custom-models-list').on('blur', '.wpaw-custom-model-id', function() {
$('#wpaw-custom-models-list').on('blur', '.wpaw-custom-model-id', function () {
const $row = $(this).closest('.custom-model-row');
const modelId = $row.find('.wpaw-custom-model-id').val().trim();
if (modelId) {
saveCustomModel($row);
}
});
// Auto-save on blur from model name input
$('#wpaw-custom-models-list').on('blur', '.wpaw-custom-model-name', function() {
$('#wpaw-custom-models-list').on('blur', '.wpaw-custom-model-name', function () {
const $row = $(this).closest('.custom-model-row');
const modelId = $row.find('.wpaw-custom-model-id').val().trim();
if (modelId) {
saveCustomModel($row);
}
});
// Auto-save on type change
$('#wpaw-custom-models-list').on('change', '.wpaw-custom-model-type', function() {
$('#wpaw-custom-models-list').on('change', '.wpaw-custom-model-type', function () {
const $row = $(this).closest('.custom-model-row');
const modelId = $row.find('.wpaw-custom-model-id').val().trim();
if (modelId) {
saveCustomModel($row);
}
});
// Delete custom model
$('#wpaw-custom-models-list').on('click', '.wpaw-remove-custom-model', function() {
$('#wpaw-custom-models-list').on('click', '.wpaw-remove-custom-model', function () {
const $row = $(this).closest('.custom-model-row');
const modelId = $row.find('.wpaw-custom-model-id').val().trim();
if (modelId) {
deleteCustomModel(modelId, $row);
} else {
@@ -931,16 +943,16 @@
model_name: modelName,
model_type: modelType
},
success: function(response) {
success: function (response) {
if (response.success) {
// Mark row as saved
$row.attr('data-saved', 'true');
// Update models and refresh Select2
state.models = response.data.models;
wpawSettingsV2.models = response.data.models;
refreshAllSelect2();
// Show toast only on first save
if (!$row.data('first-save-done')) {
showToast('Model saved!', 'success');
@@ -950,10 +962,10 @@
showToast(response.data?.message || 'Failed to save', 'danger');
}
},
error: function() {
error: function () {
showToast('Failed to save model', 'danger');
},
complete: function() {
complete: function () {
$row.css('opacity', '1');
}
});
@@ -973,7 +985,7 @@
nonce: wpawSettingsV2.nonce,
model_id: modelId
},
success: function(response) {
success: function (response) {
if (response.success) {
$row.remove();
state.models = response.data.models;
@@ -985,7 +997,7 @@
$row.css('opacity', '1');
}
},
error: function() {
error: function () {
showToast('Failed to delete model', 'danger');
$row.css('opacity', '1');
}
@@ -996,16 +1008,16 @@
* Refresh all Select2 dropdowns with current model data
*/
function refreshAllSelect2() {
$('.wpaw-select2-model').each(function() {
$('.wpaw-select2-model').each(function () {
const $select = $(this);
const currentValue = $select.val();
// Destroy and reinitialize
if ($select.hasClass('select2-hidden-accessible')) {
$select.select2('destroy');
}
});
// Reinitialize all
initSelect2();
}