File: //proc/self/cwd/nueva/modules/btecommercecopilot/views/templates/admin/generator/productAdmin.tpl
{**
* Ecommerce copilot
*
* @author businesstech.fr <modules@businesstech.fr> - https://www.businesstech.fr/
* @copyright Business Tech - https://www.businesstech.fr/
* @license see file: LICENSE.txt
*
* ____ _______
* | _ \ |__ __|
* | |_) | | |
* | _ < | |
* | |_) | | |
* |____/ |_|
*}
<style>
@keyframes progress-animation {
0% {
stroke-dashoffset: 282.6;
}
100% {
stroke-dashoffset: 0;
}
}
</style>
<div id="btecop" class="card mt-2">
<div class="card-header d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<img src="{$logoModule|escape:'htmlall':'UTF-8'}" class="mr-2" />
<div>
<span class="h2">{$moduleName|escape:'htmlall':'UTF-8'}</span>
<span class="h4 mt-2"> {l s='by' mod='btecommercecopilot'} {$author|escape:'htmlall':'UTF-8'} {l s='version' mod='btecommercecopilot'} {$version|escape:'htmlall':'UTF-8'}</span>
</div>
</div>
<div>
<a href="{$btCopModuleUrl|escape:'htmlall':'UTF-8'}" target="blank" class="btn btn-info btn-sm mt-2 mr-2">{l s='Configure the copilot' mod='btecommercecopilot'}</a>
<a id="toggleBtecop" class="btn btn-secondary btn-sm mt-2" href="javascript:void(0);" onclick="event.preventDefault();">
<i class="material-icons">visibility</i>
<span>{l s='Visibility' mod='btecommercecopilot'}</span>
</a>
</div>
</div>
<div id="btecopContent">
{if !empty($isSubValid)}
<div id="btCopGeneratedProgress" class="d-none">
<div id="loaderBlock" class="w-full mx-auto bg-gray-100rounded-lg px-4 sm:px-8 pt-21 pb-23 mb-4 text-center">
<div class="w-full mt-5">
<img src="{$btCopLoader|escape:'htmlall':'UTF-8'}" class="mx-auto" />
</div>
<div class="w-full mt-5 flex justify-center">
<div class="relative">
<svg class="progress-circle" width="100" height="100">
<circle cx="50" cy="50" r="45" stroke="gray" stroke-width="10" fill="none" />
<circle cx="50" cy="50" r="45" stroke="url(#gradient)" stroke-width="10" fill="none" stroke-dasharray="282.6" stroke-dashoffset="282.6" style="transition: stroke-dashoffset 2s linear; animation: progress-animation 2s infinite;" />
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#40FEFE;stop-opacity:1" />
<stop offset="100%" style="stop-color:#63CAD1;stop-opacity:1" />
</linearGradient>
</defs>
</svg>
</div>
</div>
<div class="mt-3">
<p class="h5 text-uppercase font-weight-bold">{l s='Your copilot is working... Please wait a few moments...' mod='btecommercecopilot'}</p>
</div>
</div>
</div>
<div class="card-body" id="btCopilotBlock">
{if !empty($getConsumptionRatio) && $getConsumptionRatio > 80}
<div class="alert alert-warning">
{l s='Be careful! You\'ve already used' mod='btecommercecopilot'} <b>{$getConsumptionRatio|escape:'htmlall':'UTF-8'}</b> %
{l s='of your available data.' mod='btecommercecopilot'}
{if !empty($wordsAvailable)}
<br />{l s='Number of words remaining (approx.):' mod='btecommercecopilot'} <b>{$wordsAvailable|escape:'htmlall':'UTF-8'}</b>
{/if}
</div>
{/if}
{if empty($canUse)}
<div class="alert alert-danger">
{l s='No more token available.' mod='btecommercecopilot'}
</div>
{/if}
<div class="alert alert-info">
<h4 class="alert-heading">{l s='Need help writing or translating a text? Don\'t worry, your e-commerce copilot is here to help.' mod='btecommercecopilot'}</h4>
<div class="mb-3">
<h5>{l s='Content generation:' mod='btecommercecopilot'}</h5>
<p>{l s='Click on the type of description you want to generate and wait a few moments. The content will be generated in the current language of the product form.' mod='btecommercecopilot'}</p>
</div>
<div>
<h5>{l s='Translation:' mod='btecommercecopilot'}</h5>
<p>{l s='First select the destination language, then click on the description type to be translated and wait a few moments. The source language is the current language of the product form.' mod='btecommercecopilot'}</p>
</div>
</div>
<div class="alert alert-danger d-none" id="invalidData">{*Handle by ajax*}</div>
<div id="btCopGeneratedNoDesc" class="d-none">
<div class="alert alert-warning col-12 mt-2 mb-3">
{l s='The destination language is the same as the source language. Please change it.' mod='btecommercecopilot'}
</div>
</div>
<div id="btCopGeneratedWarning" class="d-none">
<div class="alert alert-warning col-12 mt-2 mb-3">
{l s='You must first give your product a title and save the form a first time before you can use the copilot.' mod='btecommercecopilot'}
</div>
</div>
<div class="col-xs-12 {if empty($canUse)} d-none {/if}" id="btCopGenerateAction">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-12 col-md-6">
<label class="h3"><b>{l s='Generate' mod='btecommercecopilot'}</b></label>
<div class="row" id="btCopTranslateAction">
<div class="col-xs-12 col-4 text-center mb-2">
<a class="btn {if empty($isPs81)}btn-outline-success {else} btn-success text-white {/if}col-12" id="BtCopGenerateLongDesc" data-action="{$BtCopGenerateLongDesc|escape:'htmlall':'UTF-8'}"> <i class="material-icons">add_circle</i> {l s='Long description' mod='btecommercecopilot'}</a>
</div>
<div class="col-xs-12 col-4 text-center mb-2">
<a class="btn {if empty($isPs81)}btn-outline-success {else} btn-success text-white {/if} col-12" id="BtCopGenerateShortDesc" data-action="{$BtCopGenerateShortDesc|escape:'htmlall':'UTF-8'}"> <i class="material-icons">add_circle</i> {l s='Short description' mod='btecommercecopilot'}</a>
</div>
<div class="col-xs-12 col-4 text-center mb-2">
<a class="btn {if empty($isPs81)}btn-outline-success {else} btn-success text-white {/if} col-12" id="BtCopGenerateMetaDesc" data-action="{$BtCopGenerateMetaDesc|escape:'htmlall':'UTF-8'}"> <i class="material-icons">add_circle</i> {l s='Meta-description' mod='btecommercecopilot'}</a>
</div>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="form-group">
<label class="h3" for="idLangTo"><b>{l s='Translate into' mod='btecommercecopilot'}</b></label>
<select class="form-control" name="idLangTo" id="idLangTo" aria-describedby="idLangFromFor">
{foreach from=$Btlanguages item=lang}
<option value='{$lang.id_lang|escape:'htmlall':'UTF-8'}'>{$lang.name|escape:'htmlall':'UTF-8'}</option>
{/foreach}
</select>
</div>
<div class="row" id="btCopTranslateAction">
<div class="col-4 text-center">
<a class="btn {if empty($isPs81)}btn-outline-info {else} btn-info text-white {/if} col-12" id="BtCopTranslateLongDesc" data-action="{$BtCopTranslateLongDesc|escape:'htmlall':'UTF-8'}"> <i class="material-icons">translate</i> {l s='Long description' mod='btecommercecopilot'}</a>
</div>
<div class="col-4 text-center">
<a class="btn {if empty($isPs81)}btn-outline-info {else} btn-info text-white {/if} col-12" id="BtCopTranslateShortDesc" data-action="{$BtCopTranslateShortDesc|escape:'htmlall':'UTF-8'}"> <i class="material-icons">translate</i> {l s='Short description' mod='btecommercecopilot'}</a>
</div>
<div class="col-4 text-center">
<a class="btn {if empty($isPs81)}btn-outline-info {else} btn-info text-white {/if} col-12" id="BtCopTranslateMetaDesc" data-action="{$BtCopTranslateMetaDesc|escape:'htmlall':'UTF-8'}"> <i class="material-icons">translate</i> {l s='Meta-description' mod='btecommercecopilot'}</a>
</div>
</div>
</div>
</div>
</div>
</div>
<hr />
<div class="row p-2 d-none" id="btCopGeneratedData">
<input type="hidden" name="generatedDataType" id="generatedDataType" />
<input type="hidden" name="generateAction" id="generateAction" />
<h2 for="productInput">{l s='Preview' mod='btecommercecopilot'}</h2>
<p class="alert alert-warning">
{l s='Here is a preview of the generated content, in HTML format.' mod='btecommercecopilot'} <b>{l s='We strongly advise you to read the content generated by the AI, in order to check that it is coherent and corresponds to what you want.' mod='btecommercecopilot'}</b> {l s='The AI is just a copilot. It\'s there to help you, but it can\'t replace you. Read the text, improve or correct it if necessary, and save. Your content will then be updated in your form.' mod='btecommercecopilot'}
</p>
<div class="row">
<div class="col-6">
<div class="form-group" id="output">
<textarea class="form-control" rows="10" name="ecopProductDescription" id="ecopProductDescription" required="true" oninput="updateProductDescriptionContent(this.value, 'previewContent');"></textarea>
</div>
</div>
<div class="col-6">
<h3 class="mb-3">{l s='Final rendering preview' mod='btecommercecopilot'}</h3>
<hr/>
<div class="form-group" id="ecopProductDescriptionOverview">
<div class="border p-3 bg-light shadow-lg rounded" style="height: 300px; overflow-y: auto;">
<div id="previewContent"></div>
</div>
</div>
</div>
</div>
<hr/>
<div class="col-12 mt-3 text-right">
<a class="btn {if empty($isPs81)}btn-outline-success{else}btn-success text-white{/if} col-2 float-right" id="BtCopSave" data-action="{$BtCopSave|escape:'htmlall':'UTF-8'}"> <i class="material-icons">save</i> {l s='Save' mod='btecommercecopilot'}</a>
</div>
</div>
</div>
{else}
<div class="alert alert-danger">
{l s='Your subscription is not valid or your PS account has been disconnected. Please check in the module configuration that your PS account is still connected to your store, and if not, please reconnect it. If your account is connected, it means that your subscription is no longer valid. In this case, please contact support.' mod='btecommercecopilot'}
</div>
{/if}
</div>
</div>