Viewing file:  520aed42d5ddf89c2f488c61c8c70c85.php (15.75 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
<?php $__env->startSection('title'); ?> <?php echo e(trans('customer.image_generate')); ?> <?php $__env->stopSection(); ?>
<?php $__env->startSection('extra-css'); ?>
<style>
.use-case-side-color {
background-color: #f7f9ff;
padding: 25px 10px;
border-radius: 5px;
}
.content-opacity {
opacity: 0.5;
}
.spinner {
width: 56px;
height: 56px;
display: grid;
border: 4.5px solid #0000;
border-radius: 50%;
border-color: #dbdcef #0000;
animation: spinner-e04l1k 1s infinite linear;
}
.spinner::before,
.spinner::after {
content: "";
grid-area: 1/1;
margin: 2.2px;
border: inherit;
border-radius: 50%;
}
.spinner::before {
border-color: #474bff #0000;
animation: inherit;
animation-duration: 0.5s;
animation-direction: reverse;
}
.spinner::after {
margin: 8.9px;
}
@keyframes spinner-e04l1k {
100% {
transform: rotate(1turn);
}
}
.loader {
margin:0 auto;
position: absolute;
z-index: 999;
top: 270px;
width: 0%;
left: 56%;
}
@media(max-width: 700px){
.loader {
margin:0 auto;
position: absolute;
z-index: 999;
top: 270px;
width: 0%;
left: 40% !important;
}
}
.image-image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.image-middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.image-container:hover .image-image {
opacity: 0.3;
}
.image-container:hover .image-middle {
opacity: 1;
}
.image-text {
background-color: #04AA6D;
color: white;
font-size: 16px;
border-radius: 5px;
padding: 10px 15px;
}
</style>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('content'); ?>
<!-- Content Header (Page header) -->
<div class="content-header custom-content-header">
<h5><?php echo e(trans('customer.generate_image')); ?></h5>
<p class="m-0 section-heading-text">
<i class="fa fa-file-image mr-1 op-07"></i>
<span class="panel-name op-07">
<?php echo e(trans('customer.customer_panel')); ?>
</span>
<i class="fa fa-angle-double-right ml-1 mr-1" aria-hidden="true"></i>
<span class="header-active"><?php echo e(trans('customer.image_generate')); ?></span>
</p>
</div>
<!-- /.content-header -->
<div class="loader d-none" id="loader">
<div class="spinner"></div>
</div>
<section class="content" id="content-opacity">
<div class="row">
<div class="col-12 col-sm-12 mx-auto">
<div class="card">
<div class="card-header">
<h2 class="card-title"><?php echo app('translator')->get('customer.image_generate'); ?></h2>
<a class="btn btn-info float-right" href="<?php echo e(route('customer.image.generate.list')); ?>"><?php echo app('translator')->get('admin.form.button.back'); ?></a>
</div>
<form method="post" role="form">
<?php echo csrf_field(); ?>
<div class="card-body">
<div class="row">
<div class="col-lg-4">
<div class="row use-case-side-color">
<div class="col-lg-12">
<div class="form-group">
<label for="use_case"><?php echo e(trans('customer.available_image')); ?> :
<?php if(auth()->user()->current_plan->is_image_limit == 'yes'): ?>
<span class="text-primary"><?php echo e(trans('customer.unlimited_image_limit')); ?></span>
<?php else: ?>
<span class="text-primary"><?php echo e(auth()->user()->current_plan->available_image); ?></span>
<?php endif; ?>
</label>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label for="name"><?php echo e(trans('customer.image_name')); ?> <small class="font-italic">(<?php echo e(trans('customer.optional')); ?>)</small></label>
<input type="text" class="form-control" name="name" id="name" placeholder="<?php echo e(trans('customer.enter_your_image_name')); ?>">
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label for="keyword"><?php echo e(trans('customer.image_description')); ?></label>
<textarea type="text" class="form-control" id="image-generate-text" style="height: 160px;" placeholder="An Impressionist oil painting of sunflowers in a purple vase…"></textarea>
<small class="text-danger d-none" id="keyword_text"><?php echo e(trans('customer.keyword_field_is_required')); ?></small>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label for="image_quantity"><?php echo e(trans('customer.select_number_of_image')); ?></label>
<select name="image_quantity" id="image_quantity" class="form-control">
<option selected disabled><?php echo e(trans('customer.select_a_option')); ?></option>
<option value="1"><?php echo e(trans('customer.one')); ?></option>
<option value="2"><?php echo e(trans('customer.two')); ?></option>
<option value="3"><?php echo e(trans('customer.three')); ?></option>
<option value="4"><?php echo e(trans('customer.four')); ?></option>
<option value="5"><?php echo e(trans('customer.five')); ?></option>
<option value="6"><?php echo e(trans('customer.six')); ?></option>
<option value="7"><?php echo e(trans('customer.seven')); ?></option>
<option value="8"><?php echo e(trans('customer.eight')); ?></option>
<option value="9"><?php echo e(trans('customer.nine')); ?></option>
<option value="10"><?php echo e(trans('customer.ten')); ?></option>
</select>
<small class="text-danger d-none" id="image_quantity_text"><?php echo e(trans('customer.image_quantity_field_is_required')); ?></small>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label for="image_size"><?php echo e(trans('customer.image_size')); ?></label>
<select name="image_size" id="image_size" class="form-control">
<option selected disabled><?php echo e(trans('customer.select_a_option')); ?></option>
<option value="256x256">256x256</option>
<option value="512x512">512x512</option>
<option value="1024x1024">1024x1024</option>
</select>
<small class="text-danger d-none" id="image_size_text"><?php echo e(trans('customer.image_size_field_is_required')); ?></small>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<button
type="button"
id="image-generate-btn"
class="btn btn-primary w-100">
<i class="fas fa-pencil-alt mr-2"></i><?php echo app('translator')->get('customer.image_for_me'); ?>
</button>
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="row" id="image">
<div class="col-lg-12">
<img src="<?php echo e(asset('images/defult_image.jpg')); ?>" class="w-100 p-2" alt="defult_image">
</div>
</div>
</div>
</div>
</div>
<!-- /.card-body -->
</form>
</div>
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('extra-scripts'); ?>
<script>
function delay(callback, ms) {
let timer = 0;
return function () {
let context = this, args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
callback.apply(context, args);
}, ms || 0);
};
}
$(document).on('click', '#image-generate-btn', delay(function (e) {
e.preventDefault();
$('#content-opacity').addClass('content-opacity');
$('#loader').removeClass('d-none');
const keyword = $('#image-generate-text').val();
const name = $('#name').val();
const imageQuantity = $('#image_quantity').val();
const imageSize = $('#image_size').val();
if (!keyword){
$('#keyword_text').removeClass('d-none');
}else {
$('#keyword_text').addClass('d-none');
}
if (!imageQuantity){
$('#image_quantity_text').removeClass('d-none');
}else {
$('#image_quantity_text').addClass('d-none');
}
if (!imageSize){
$('#image_size_text').removeClass('d-none');
}else {
$('#image_size_text').addClass('d-none');
}
if (keyword && imageQuantity && imageSize){
$.ajax({
type: 'GET',
url: '<?php echo e(route('customer.open_ai.get.request.image')); ?>',
data: {
keyword: keyword,
name: name,
imageQuantity: imageQuantity,
imageSize: imageSize,
},
success: function (res) {
if (res.status == 'success') {
let html = '';
$.each(res.data, function (index, value) {
html += `<div class="col-lg-4">
<div class="image-container">
<img src="${value}" alt="image" class="image-image" style="width:100%">
<div class="image-middle">
<div data-url="${value}" class="image-text"><i class="fa fa-download"></i></div>
</div>
</div>
</div>`;
});
$('#image').html(html);
$('#content-opacity').removeClass('content-opacity');
$('#loader').addClass('d-none');
} else {
$(document).Toasts('create', {
autohide: true,
delay: 10000,
class: 'bg-danger',
title: 'Notification',
body: res.message,
});
$('#content-opacity').removeClass('content-opacity');
$('#loader').addClass('d-none');
}
}
})
}else {
$('#content-opacity').removeClass('content-opacity');
$('#loader').addClass('d-none');
}
}, 500));
$(document).on('click', '.image-text', delay(function (e) {
e.preventDefault();
const imageUrl = $(this).attr('data-url');
downloadImage(imageUrl);
}, 500));
function downloadImage(url) {
fetch(url, {
mode : 'no-cors',
})
.then(response => response.blob())
.then(blob => {
let blobUrl = window.URL.createObjectURL(blob);
let a = document.createElement('a');
a.download = url.replace(/^.*[\\\/]/, '');
a.href = blobUrl;
document.body.appendChild(a);
a.click();
a.remove();
})
}
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.customer', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/pcolfjqt/ai.picotech.app/resources/views/customer/open_ai/image_generate.blade.php ENDPATH**/ ?>
|