infosave2007
244 lines
13 KiB
Twig
244 lines
13 KiB
Twig
{% extends "layout.twig" %}
|
|
|
|
{% block title %}{{ t('ai.generation_preview') }} - {{ parent() }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="min-h-screen bg-gray-50">
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<!-- Header -->
|
|
<div class="mb-8">
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<h1 class="text-3xl font-bold text-gray-900">{{ t('ai.generation_preview') }}</h1>
|
|
<p class="mt-2 text-gray-600">{{ t('ai.generation_preview_description') }}</p>
|
|
</div>
|
|
<div class="flex space-x-3">
|
|
<a href="/settings/protocols" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
|
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
|
|
</svg>
|
|
{{ t('protocols.back_to_protocols') }}
|
|
</a>
|
|
<button id="apply-script-btn" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
|
|
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
{{ t('ai.apply_to_protocol') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Generation Info -->
|
|
<div class="bg-white shadow rounded-lg mb-6">
|
|
<div class="px-6 py-4 border-b border-gray-200">
|
|
<h2 class="text-lg font-medium text-gray-900">{{ t('ai.generation_details') }}</h2>
|
|
</div>
|
|
<div class="px-6 py-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">{{ t('ai.model_used') }}</label>
|
|
<p class="mt-1 text-sm text-gray-900">{{ generation.model_used }}</p>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">{{ t('ai.generated_at') }}</label>
|
|
<p class="mt-1 text-sm text-gray-900">{{ generation.created_at|date('Y-m-d H:i:s') }}</p>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">{{ t('protocols.ubuntu_compatible') }}</label>
|
|
<div class="mt-1">
|
|
{% if generation.ubuntu_compatible %}
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
|
|
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
|
</svg>
|
|
{{ t('common.compatible') }}
|
|
</span>
|
|
{% else %}
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
|
|
<svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
|
|
</svg>
|
|
{{ t('common.not_compatible') }}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% if generation.protocol_name %}
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">{{ t('ai.associated_protocol') }}</label>
|
|
<p class="mt-1 text-sm text-gray-900">{{ generation.protocol_name }}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Prompt -->
|
|
<div class="bg-white shadow rounded-lg mb-6">
|
|
<div class="px-6 py-4 border-b border-gray-200">
|
|
<h2 class="text-lg font-medium text-gray-900">{{ t('ai.user_prompt') }}</h2>
|
|
</div>
|
|
<div class="px-6 py-4">
|
|
<p class="text-sm text-gray-900 whitespace-pre-wrap">{{ generation.prompt }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Generated Script -->
|
|
<div class="bg-white shadow rounded-lg mb-6">
|
|
<div class="px-6 py-4 border-b border-gray-200">
|
|
<div class="flex justify-between items-center">
|
|
<h2 class="text-lg font-medium text-gray-900">{{ t('ai.generated_installation_script') }}</h2>
|
|
<button id="copy-script-btn" class="inline-flex items-center px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
|
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
|
|
</svg>
|
|
{{ t('ai.copy_script') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="px-6 py-4">
|
|
<div class="bg-gray-900 text-green-400 p-4 rounded-md overflow-x-auto">
|
|
<pre id="script-content" class="text-sm whitespace-pre-wrap">{{ script }}</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI Suggestions -->
|
|
{% if suggestions %}
|
|
<div class="bg-white shadow rounded-lg mb-6">
|
|
<div class="px-6 py-4 border-b border-gray-200">
|
|
<h2 class="text-lg font-medium text-gray-900">{{ t('ai.suggestions') }}</h2>
|
|
</div>
|
|
<div class="px-6 py-4">
|
|
<ul class="space-y-2">
|
|
{% for suggestion in suggestions %}
|
|
<li class="flex items-start">
|
|
<svg class="w-5 h-5 text-blue-500 mr-2 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
|
|
</svg>
|
|
<span class="text-sm text-gray-900">{{ suggestion }}</span>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Actions -->
|
|
<div class="bg-white shadow rounded-lg">
|
|
<div class="px-6 py-4 border-b border-gray-200">
|
|
<h2 class="text-lg font-medium text-gray-900">{{ t('common.actions') }}</h2>
|
|
</div>
|
|
<div class="px-6 py-4">
|
|
<div class="flex flex-wrap gap-3">
|
|
<button id="download-script-btn" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
|
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
|
</svg>
|
|
{{ t('ai.download_script') }}
|
|
</button>
|
|
|
|
{% if generation.protocol_id %}
|
|
<button id="view-protocol-btn" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
|
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
|
</svg>
|
|
{{ t('protocols.view_protocol') }}
|
|
</button>
|
|
{% endif %}
|
|
|
|
<button id="regenerate-btn" class="inline-flex items-center px-4 py-2 border border-purple-300 rounded-md shadow-sm text-sm font-medium text-purple-700 bg-white hover:bg-purple-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
|
|
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
|
|
</svg>
|
|
{{ t('ai.regenerate') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const scriptContent = document.getElementById('script-content').textContent;
|
|
const generationId = {{ generation.id }};
|
|
const protocolId = {{ generation.protocol_id ?: 'null' }};
|
|
|
|
// Copy script
|
|
document.getElementById('copy-script-btn').addEventListener('click', function() {
|
|
const textarea = document.createElement('textarea');
|
|
textarea.value = scriptContent;
|
|
document.body.appendChild(textarea);
|
|
textarea.select();
|
|
document.execCommand('copy');
|
|
document.body.removeChild(textarea);
|
|
|
|
// Show feedback
|
|
const originalText = this.innerHTML;
|
|
this.innerHTML = '<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>{{ t('common.copied') }}';
|
|
setTimeout(() => {
|
|
this.innerHTML = originalText;
|
|
}, 2000);
|
|
});
|
|
|
|
// Download script
|
|
document.getElementById('download-script-btn').addEventListener('click', function() {
|
|
const blob = new Blob([scriptContent], { type: 'text/plain' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `install-${generationId}.sh`;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
URL.revokeObjectURL(url);
|
|
});
|
|
|
|
// Apply to protocol
|
|
document.getElementById('apply-script-btn').addEventListener('click', function() {
|
|
if (!protocolId) {
|
|
alert('{{ t('ai.no_associated_protocol') }}');
|
|
return;
|
|
}
|
|
|
|
if (confirm('{{ t('ai.confirm_apply_script_to_protocol') }}')) {
|
|
fetch(`/api/ai/generations/${generationId}/apply`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(result => {
|
|
if (result.success) {
|
|
alert('{{ t('ai.script_applied_successfully') }}');
|
|
window.location.href = `/settings/protocols/${protocolId}/edit`;
|
|
} else {
|
|
alert('{{ t('ai.error_applying_script') }}: ' + result.error);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
alert('{{ t('ai.error_applying_script') }}: ' + error.message);
|
|
});
|
|
}
|
|
});
|
|
|
|
// View protocol
|
|
document.getElementById('view-protocol-btn').addEventListener('click', function() {
|
|
if (protocolId) {
|
|
window.location.href = `/settings/protocols/${protocolId}/edit`;
|
|
}
|
|
});
|
|
|
|
// Regenerate
|
|
document.getElementById('regenerate-btn').addEventListener('click', function() {
|
|
if (confirm('{{ t('ai.confirm_regenerate_script') }}')) {
|
|
// Go back to protocols page with AI assistant open
|
|
window.location.href = '/settings/protocols';
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |