Viewing file:  image_generate.blade.php (14.8 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
@extends('layouts.customer')
@section('title') {{trans('customer.image_generate')}} @endsection
@section('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>
@endsection
@section('content')
<!-- Content Header (Page header) -->
<div class="content-header custom-content-header">
<h5>{{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">
{{trans('customer.customer_panel')}}
</span>
<i class="fa fa-angle-double-right ml-1 mr-1" aria-hidden="true"></i>
<span class="header-active">{{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">@lang('customer.image_generate')</h2>
<a class="btn btn-info float-right" href="{{route('customer.image.generate.list')}}">@lang('admin.form.button.back')</a>
</div>
<form method="post" role="form">
@csrf
<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">{{trans('customer.available_image')}} :
@if(auth()->user()->current_plan->is_image_limit == 'yes')
<span class="text-primary">{{trans('customer.unlimited_image_limit')}}</span>
@else
<span class="text-primary">{{auth()->user()->current_plan->available_image}}</span>
@endif
</label>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label for="name">{{trans('customer.image_name')}} <small class="font-italic">({{trans('customer.optional')}})</small></label>
<input type="text" class="form-control" name="name" id="name" placeholder="{{trans('customer.enter_your_image_name')}}">
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label for="keyword">{{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">{{trans('customer.keyword_field_is_required')}}</small>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label for="image_quantity">{{trans('customer.select_number_of_image')}}</label>
<select name="image_quantity" id="image_quantity" class="form-control">
<option selected disabled>{{trans('customer.select_a_option')}}</option>
<option value="1">{{trans('customer.one')}}</option>
<option value="2">{{trans('customer.two')}}</option>
<option value="3">{{trans('customer.three')}}</option>
<option value="4">{{trans('customer.four')}}</option>
<option value="5">{{trans('customer.five')}}</option>
<option value="6">{{trans('customer.six')}}</option>
<option value="7">{{trans('customer.seven')}}</option>
<option value="8">{{trans('customer.eight')}}</option>
<option value="9">{{trans('customer.nine')}}</option>
<option value="10">{{trans('customer.ten')}}</option>
</select>
<small class="text-danger d-none" id="image_quantity_text">{{trans('customer.image_quantity_field_is_required')}}</small>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label for="image_size">{{trans('customer.image_size')}}</label>
<select name="image_size" id="image_size" class="form-control">
<option selected disabled>{{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">{{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>@lang('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="{{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>
@endsection
@section('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: '{{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>
@endsection
|