652 lines
35 KiB
HTML
652 lines
35 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% load static %}
|
|
|
|
{% block title %}AI Image Generator{% endblock %}
|
|
|
|
{% block js %}
|
|
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
|
|
<script src="{% static 'plugins/masonry-layout/dist/masonry.pkgd.min.js' %}"></script>
|
|
<script src="{% static 'js/demo/ai-image-generator.demo.js' %}"></script>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- BEGIN ai-generator -->
|
|
<div class="card border-0 rounded-4 overflow-hidden position-relative bg-component mb-4 mt-2" data-bs-theme="dark">
|
|
<!-- BEGIN ai-cover-bg -->
|
|
<img class="object-fit-cover position-absolute top-0 end-0 h-100 w-100 opacity-50" src="{% static 'img/ai/cover.jpg' %}" alt="" />
|
|
<!-- END ai-cover-bg -->
|
|
|
|
<!-- BEGIN ai-content -->
|
|
<div class="position-relative p-3 p-md-4 bg-gradient-135 bg-gradient-from-black bg-gradient-to-transparent">
|
|
<!-- BEGIN ai-badge -->
|
|
<span class="border border-2 border-light position-absolute top-0 start-0 m-3 rounded-5 px-3 py-1 fw-bolder d-flex align-items-center">
|
|
<div class="d-inline-flex align-items-center">
|
|
<i class="fa fa-circle fa-fw fs-4px text-body text-opacity-75 me-3px ms-n1"></i>
|
|
<i class="fa fa-circle fa-fw fs-4px text-body text-opacity-50 me-3px"></i>
|
|
<i class="fa fa-circle fa-fw fs-4px text-body text-opacity-25 me-2"></i>
|
|
</div>
|
|
AI-Generator
|
|
</span>
|
|
<!-- END ai-badge -->
|
|
|
|
<!-- BEGIN ai-title -->
|
|
<div class="text-center fs-1 fw-bold mt-5 pt-3">
|
|
Describe your
|
|
<span class="text-gradient2 bg-gradient-452 bg-gradient-from-teal bg-gradient-to-blue">ideas</span> and generate
|
|
</div>
|
|
<!-- END ai-title -->
|
|
|
|
<!-- BEGIN ai-desc -->
|
|
<div class="text-center fs-5 fw-bold text-body text-opacity-75 mb-4">Transform your words into visual masterpieces: Leverage AI technology to craft breathtaking images.</div>
|
|
<!-- END ai-desc -->
|
|
|
|
<!-- BEGIN ai-form -->
|
|
<div class="position-relative mx-auto h-100 w-100 mb-2" style="max-width: 520px;">
|
|
<form action="" method="POST" data-form-submit="generate-image">
|
|
<input type="text" class="form-control form-control-lg bg-black bg-opacity-50 bg-blur-3 border-2 shadow-none rounded-4 h-60px" id="userInput" placeholder="Write a prompt to generate" />
|
|
<div class="position-absolute end-0 top-0 bottom-0 d-flex p-10px">
|
|
<button id="sendButton" class="d-flex align-items-center btn btn-lg border-0 bg-gradient-45 rounded-12px h-auto bg-gradient-from-blue bg-gradient-to-teal">
|
|
Generate <i class="fa fa-arrow-right ms-2 text-inverse mt-1px"></i>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- END ai-form -->
|
|
|
|
<!-- BEGIN ai-option -->
|
|
<div class="position-relative h-100 w-100 mb-5 pb-3 mx-auto d-flex" style="max-width: 520px;">
|
|
<div class="dropdown me-2">
|
|
<label class="btn bg-black bg-opacity-50 bg-blur-3 rounded-10px fw-bolder border-0 d-flex align-items-center">
|
|
<input type="file" class="d-none" accept="image/*" onchange="previewImage(event)" />
|
|
<i id="previewIcon" class="fa fa-fw fa-plus me-4px"></i> Upload Image
|
|
<img id="previewImage" src="" alt="" class="w-20px h-20px rounded-3 me-n1 ms-2 d-none my-n1" />
|
|
</label>
|
|
</div>
|
|
<div class="dropdown me-2 ms-auto">
|
|
<button type="button" data-bs-toggle="dropdown" class="btn bg-black bg-opacity-50 bg-blur-3 rounded-10px fw-bolder border-0"><i class="fa fa-fw fa-globe me-2px"></i> <span id="aiRatioText">Ratio</span> <i class="fa fa-chevron-down fa-fw opacity-50 ms-1"></i></button>
|
|
<div class="dropdown-menu dropdown-menu-end rounded-3">
|
|
<a class="dropdown-item" href="#" data-select="ai-dropdown-selection" data-target="#aiRatioText" data-value="Ratio">None</a>
|
|
<a class="dropdown-item" href="#" data-select="ai-dropdown-selection" data-target="#aiRatioText" data-value="1:1 (Square)">1:1 (Square)</a>
|
|
<a class="dropdown-item" href="#" data-select="ai-dropdown-selection" data-target="#aiRatioText" data-value="16:9 (Widescreen)">16:9 (Widescreen)</a>
|
|
<a class="dropdown-item" href="#" data-select="ai-dropdown-selection" data-target="#aiRatioText" data-value="4:3 (Standard)">4:3 (Standard)</a>
|
|
<a class="dropdown-item" href="#" data-select="ai-dropdown-selection" data-target="#aiRatioText" data-value="3:2 (Classic)">3:2 (Classic)</a>
|
|
<a class="dropdown-item" href="#" data-select="ai-dropdown-selection" data-target="#aiRatioText" data-value="21:9 (Ultra Wide)">21:9 (Ultra Wide)</a>
|
|
<a class="dropdown-item" href="#" data-select="ai-dropdown-selection" data-target="#aiRatioText" data-value="9:16 (Portrait)">9:16 (Portrait)</a>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown">
|
|
<button type="button" data-bs-toggle="dropdown" class="btn bg-black bg-opacity-50 bg-blur-3 rounded-10px fw-bolder border-0"><i class="fa fa-fw fa-palette me-2px"></i> <span id="aiStyleText">Style</span> <i class="fa fa-chevron-down fa-fw opacity-50 ms-1"></i></button>
|
|
<div class="dropdown-menu dropdown-menu-end rounded-3">
|
|
<a class="dropdown-item" href="#" data-select="ai-dropdown-selection" data-target="#aiStyleText" data-value="Style">None</a>
|
|
<a class="dropdown-item" href="#" data-select="ai-dropdown-selection" data-target="#aiStyleText" data-value="Realistic">Realistic</a>
|
|
<a class="dropdown-item" href="#" data-select="ai-dropdown-selection" data-target="#aiStyleText" data-value="Anime">Anime</a>
|
|
<a class="dropdown-item" href="#" data-select="ai-dropdown-selection" data-target="#aiStyleText" data-value="Cyberpunk">Cyberpunk</a>
|
|
<a class="dropdown-item" href="#" data-select="ai-dropdown-selection" data-target="#aiStyleText" data-value="Pixel Art">Pixel Art</a>
|
|
<a class="dropdown-item" href="#" data-select="ai-dropdown-selection" data-target="#aiStyleText" data-value="Cartoon">Cartoon</a>
|
|
<a class="dropdown-item" href="#" data-select="ai-dropdown-selection" data-target="#aiStyleText" data-value="Sketch">Sketch</a>
|
|
<a class="dropdown-item" href="#" data-select="ai-dropdown-selection" data-target="#aiStyleText" data-value="Fantasy">Fantasy</a>
|
|
<a class="dropdown-item" href="#" data-select="ai-dropdown-selection" data-target="#aiStyleText" data-value="Neon">Neon</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END ai-option -->
|
|
|
|
<!-- BEGIN ai-gen-tools -->
|
|
<h4 class="mb-3">Image generation tools</h4>
|
|
<div class="row g-3 g-lg-4">
|
|
<div class="col-sm-6 col-xl-3">
|
|
<div class="card border-0 rounded-4 overflow-hidden" data-bs-theme="dark">
|
|
<img class="card-img object-fit-cover" height="180" src="{% static 'img/ai/tools-1.jpg' %}" alt="" />
|
|
<div class="card-img-overlay h-100 d-flex align-items-end bg-gradient-to-t bg-gradient-from-black bg-gradient-to-transparent">
|
|
<div>
|
|
<iconify-icon icon="solar:volleyball-2-bold-duotone" class="fs-30px"></iconify-icon>
|
|
<div class="fw-bold text-body fs-5">Text to Image</div>
|
|
<div class="fw-bold text-body text-opacity-75 small">Turn your words into stunning visuals with AI-generated artwork.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-xl-3">
|
|
<div class="card border-0 rounded-4 overflow-hidden" data-bs-theme="dark">
|
|
<img class="card-img object-fit-cover" height="180" src="{% static 'img/ai/tools-2.jpg' %}" alt="" />
|
|
<div class="card-img-overlay h-100 d-flex align-items-end bg-gradient-to-t bg-gradient-from-black bg-gradient-to-transparent">
|
|
<div>
|
|
<iconify-icon icon="solar:layers-minimalistic-bold-duotone" class="fs-30px"></iconify-icon>
|
|
<div class="fw-bold text-body fs-5">Text to PNG</div>
|
|
<div class="fw-bold text-body text-opacity-75 small">Create high-quality PNG images from text with transparency support.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-xl-3">
|
|
<div class="card border-0 rounded-4 overflow-hidden" data-bs-theme="dark">
|
|
<img class="card-img object-fit-cover" height="180" src="{% static 'img/ai/tools-3.jpg' %}" alt="" />
|
|
<div class="card-img-overlay h-100 d-flex align-items-end bg-gradient-to-t bg-gradient-from-black bg-gradient-to-transparent">
|
|
<div>
|
|
<iconify-icon icon="solar:gallery-edit-bold-duotone" class="fs-30px"></iconify-icon>
|
|
<div class="fw-bold text-body fs-5">Image Editor</div>
|
|
<div class="fw-bold text-body text-opacity-75 small">Enhance, modify, and perfect your images with powerful editing tools.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-xl-3">
|
|
<div class="card border-0 rounded-4 overflow-hidden" data-bs-theme="dark">
|
|
<img class="card-img object-fit-cover" height="180" src="{% static 'img/ai/tools-4.jpg' %}" alt="" />
|
|
<div class="card-img-overlay h-100 d-flex align-items-end bg-gradient-to-t bg-gradient-from-black bg-gradient-to-transparent">
|
|
<div>
|
|
<iconify-icon icon="solar:refresh-bold-duotone" class="fs-30px"></iconify-icon>
|
|
<div class="fw-bold text-body fs-5">Reimagine</div>
|
|
<div class="fw-bold text-body text-opacity-75 small">Transform and regenerate images with fresh, AI-powered creativity.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END ai-gen-tools -->
|
|
</div>
|
|
<!-- END ai-content -->
|
|
</div>
|
|
<!-- END ai-generator -->
|
|
|
|
<!-- BEGIN ai-generated-result -->
|
|
<div id="aiGeneratedContainer" class="mb-4 pt-2 d-none">
|
|
<div id="aiGeneratingResult" class="fade d-none">
|
|
<h4 class="mb-2">Generating</h4>
|
|
<div class="mb-3 fw-bold d-flex align-items-center">
|
|
<iconify-icon icon="solar:info-circle-bold-duotone" class="fs-4"></iconify-icon>
|
|
<div class="ps-1">
|
|
This is a simulated AI-generated response. Please note that the image was not created by an actual AI model.
|
|
</div>
|
|
</div>
|
|
<div class="row g-3 g-lg-4">
|
|
<div class="col-sm-6 col-lg-3">
|
|
<div class="ratio" style="--bs-aspect-ratio: 68.46%;">
|
|
<div><div class="shimmer-loader rounded-4 h-100"></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-lg-3">
|
|
<div class="ratio" style="--bs-aspect-ratio: 68.46%;">
|
|
<div><div class="shimmer-loader rounded-4 h-100"></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-lg-3">
|
|
<div class="ratio" style="--bs-aspect-ratio: 68.46%;">
|
|
<div><div class="shimmer-loader rounded-4 h-100"></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-lg-3">
|
|
<div class="ratio" style="--bs-aspect-ratio: 68.46%;">
|
|
<div><div class="shimmer-loader rounded-4 h-100"></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="aiGeneratedResult" class="d-none">
|
|
<h4 class="mb-2">AI-Generated Result</h4>
|
|
<div class="mb-3 fw-bold d-flex align-items-center">
|
|
<iconify-icon icon="solar:info-circle-bold-duotone" class="fs-4"></iconify-icon>
|
|
<div class="ps-1">
|
|
This is a simulated AI-generated response. Please note that the image was not created by an actual AI model.
|
|
</div>
|
|
</div>
|
|
<div class="row g-3 g-lg-4">
|
|
<div class="col-sm-6 col-lg-3">
|
|
<div class="card rounded-4 bg-none border-0 overflow-hidden hover-show" data-bs-theme="dark">
|
|
<img src="{% static 'img/ai/generated-1.jpg' %}" class="card-img" alt="Generated Image" />
|
|
<div class="card-img-overlay d-none hover-show-elm h-100 bg-gradient-to-t bg-gradient-from-black bg-gradient-to-transparent">
|
|
<div class="h-100 d-flex align-items-end">
|
|
<div class="w-100">
|
|
<h5 class="card-title text-truncate">Variant 1</h5>
|
|
<div class="d-flex">
|
|
<a href="#" class="text-decoration-none text-body me-3"><i class="fa fa-fw fa-pen opacity-50"></i> Edit</a>
|
|
<a href="#" class="text-decoration-none text-body"><i class="fa fa-fw fa-repeat opacity-50"></i> Variation</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-lg-3">
|
|
<div class="card rounded-4 bg-none border-0 overflow-hidden hover-show" data-bs-theme="dark">
|
|
<img src="{% static 'img/ai/generated-2.jpg' %}" class="card-img" alt="Generated Image" />
|
|
<div class="card-img-overlay d-none hover-show-elm h-100 bg-gradient-to-t bg-gradient-from-black bg-gradient-to-transparent">
|
|
<div class="h-100 d-flex align-items-end">
|
|
<div class="w-100">
|
|
<h5 class="card-title text-truncate">Variant 2</h5>
|
|
<div class="d-flex">
|
|
<a href="#" class="text-decoration-none text-body me-3"><i class="fa fa-fw fa-pen opacity-50"></i> Edit</a>
|
|
<a href="#" class="text-decoration-none text-body"><i class="fa fa-fw fa-repeat opacity-50"></i> Variation</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-lg-3">
|
|
<div class="card rounded-4 bg-none border-0 overflow-hidden hover-show" data-bs-theme="dark">
|
|
<img src="{% static 'img/ai/generated-3.jpg' %}" class="card-img" alt="Generated Image" />
|
|
<div class="card-img-overlay d-none hover-show-elm h-100 bg-gradient-to-t bg-gradient-from-black bg-gradient-to-transparent">
|
|
<div class="h-100 d-flex align-items-end">
|
|
<div class="w-100">
|
|
<h5 class="card-title text-truncate">Variant 3</h5>
|
|
<div class="d-flex">
|
|
<a href="#" class="text-decoration-none text-body me-3"><i class="fa fa-fw fa-pen opacity-50"></i> Edit</a>
|
|
<a href="#" class="text-decoration-none text-body"><i class="fa fa-fw fa-repeat opacity-50"></i> Variation</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-lg-3">
|
|
<div class="card rounded-4 bg-none border-0 overflow-hidden hover-show" data-bs-theme="dark">
|
|
<img src="{% static 'img/ai/generated-4.jpg' %}" class="card-img" alt="Generated Image" />
|
|
<div class="card-img-overlay d-none hover-show-elm h-100 bg-gradient-to-t bg-gradient-from-black bg-gradient-to-transparent">
|
|
<div class="h-100 d-flex align-items-end">
|
|
<div class="w-100">
|
|
<h5 class="card-title text-truncate">Variant 4</h5>
|
|
<div class="d-flex">
|
|
<a href="#" class="text-decoration-none text-body me-3"><i class="fa fa-fw fa-pen opacity-50"></i> Edit</a>
|
|
<a href="#" class="text-decoration-none text-body"><i class="fa fa-fw fa-repeat opacity-50"></i> Variation</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END ai-generated-result -->
|
|
|
|
<!-- BEGIN ai-imagine -->
|
|
<div class="mb-4 pt-2">
|
|
<h4 class="mb-3">Explore Imagine</h4>
|
|
<ul class="nav nav-pills mb-3 d-flex gap-1">
|
|
<li class="nav-item"><a class="nav-link rounded-5 px-4 py-7px bg-component text-body" aria-current="page" href="#">All</a></li>
|
|
<li class="nav-item"><a class="nav-link rounded-5 px-4 py-7px hover-bg-light text-body" href="#">Fantasy</a></li>
|
|
<li class="nav-item"><a class="nav-link rounded-5 px-4 py-7px hover-bg-light text-body" href="#">Art</a></li>
|
|
<li class="nav-item"><a class="nav-link rounded-5 px-4 py-7px hover-bg-light text-body" href="#">Nature</a></li>
|
|
<li class="nav-item"><a class="nav-link rounded-5 px-4 py-7px hover-bg-light text-body" href="#">Popculture</a></li>
|
|
<li class="nav-item"><a class="nav-link rounded-5 px-4 py-7px hover-bg-light text-body" href="#">Futuristic</a></li>
|
|
<li class="nav-item"><a class="nav-link rounded-5 px-4 py-7px hover-bg-light text-body" href="#">Architecture</a></li>
|
|
<li class="nav-item"><a class="nav-link rounded-5 px-4 py-7px hover-bg-light text-body" href="#">Animals</a></li>
|
|
<li class="nav-item"><a class="nav-link rounded-5 px-4 py-7px hover-bg-light text-body" href="#">People</a></li>
|
|
<li class="nav-item"><a class="nav-link rounded-5 px-4 py-7px hover-bg-light text-body" href="#">Food</a></li>
|
|
<li class="nav-item"><a class="nav-link rounded-5 px-4 py-7px hover-bg-light text-body" href="#">Horror</a></li>
|
|
</ul>
|
|
<div class="row g-4" data-masonry='{"percentPosition": true }' data-bs-theme="dark">
|
|
<div class="col-sm-6 col-md-3">
|
|
<div class="card rounded-4 bg-none border-0 overflow-hidden hover-show">
|
|
<img src="{% static 'img/ai/imagine-1.jpg' %}" class="card-img" alt="Generated Image" />
|
|
<div class="card-img-overlay d-none hover-show-elm h-100 bg-gradient-to-t bg-gradient-from-black bg-gradient-to-transparent">
|
|
<div class="h-100 d-flex align-items-end">
|
|
<div class="w-100">
|
|
<h5 class="card-title text-truncate">Psychedelic girl illustration</h5>
|
|
<div class="d-flex">
|
|
<a href="#" class="text-decoration-none text-body me-3"><i class="fa fa-fw fa-pen opacity-50"></i> Edit</a>
|
|
<a href="#" class="text-decoration-none text-body"><i class="fa fa-fw fa-repeat opacity-50"></i> Variation</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-3">
|
|
<div class="card rounded-4 bg-none border-0 overflow-hidden hover-show">
|
|
<img src="{% static 'img/ai/imagine-2.jpg' %}" class="card-img" alt="Generated Image" />
|
|
<div class="card-img-overlay d-none hover-show-elm h-100 bg-gradient-to-t bg-gradient-from-black bg-gradient-to-transparent">
|
|
<div class="h-100 d-flex align-items-end">
|
|
<div class="w-100">
|
|
<h5 class="card-title text-truncate">Fantasy water character</h5>
|
|
<div class="d-flex">
|
|
<a href="#" class="text-decoration-none text-body me-3"><i class="fa fa-fw fa-pen opacity-50"></i> Edit</a>
|
|
<a href="#" class="text-decoration-none text-body"><i class="fa fa-fw fa-repeat opacity-50"></i> Variation</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-3">
|
|
<div class="card rounded-4 bg-none border-0 overflow-hidden hover-show">
|
|
<img src="{% static 'img/ai/imagine-3.jpg' %}" class="card-img" alt="Generated Image" />
|
|
<div class="card-img-overlay d-none hover-show-elm h-100 bg-gradient-to-t bg-gradient-from-black bg-gradient-to-transparent">
|
|
<div class="h-100 d-flex align-items-end">
|
|
<div class="w-100">
|
|
<h5 class="card-title text-truncate">Anime character using virtual reality glasses in the metaverse</h5>
|
|
<div class="d-flex">
|
|
<a href="#" class="text-decoration-none text-body me-3"><i class="fa fa-fw fa-pen opacity-50"></i> Edit</a>
|
|
<a href="#" class="text-decoration-none text-body"><i class="fa fa-fw fa-repeat opacity-50"></i> Variation</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-3">
|
|
<div class="card rounded-4 bg-none border-0 overflow-hidden hover-show">
|
|
<img src="{% static 'img/ai/imagine-4.jpg' %}" class="card-img" alt="Generated Image" />
|
|
<div class="card-img-overlay d-none hover-show-elm h-100 bg-gradient-to-t bg-gradient-from-black bg-gradient-to-transparent">
|
|
<div class="h-100 d-flex align-items-end">
|
|
<div class="w-100">
|
|
<h5 class="card-title text-truncate">Fantasy water character</h5>
|
|
<div class="d-flex">
|
|
<a href="#" class="text-decoration-none text-body me-3"><i class="fa fa-fw fa-pen opacity-50"></i> Edit</a>
|
|
<a href="#" class="text-decoration-none text-body"><i class="fa fa-fw fa-repeat opacity-50"></i> Variation</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-3">
|
|
<div class="card rounded-4 bg-none border-0 overflow-hidden hover-show">
|
|
<img src="{% static 'img/ai/imagine-5.jpg' %}" class="card-img" alt="Generated Image" />
|
|
<div class="card-img-overlay d-none hover-show-elm h-100 bg-gradient-to-t bg-gradient-from-black bg-gradient-to-transparent">
|
|
<div class="h-100 d-flex align-items-end">
|
|
<div class="w-100">
|
|
<h5 class="card-title text-truncate">Space adventure artwork</h5>
|
|
<div class="d-flex">
|
|
<a href="#" class="text-decoration-none text-body me-3"><i class="fa fa-fw fa-pen opacity-50"></i> Edit</a>
|
|
<a href="#" class="text-decoration-none text-body"><i class="fa fa-fw fa-repeat opacity-50"></i> Variation</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-3">
|
|
<div class="card rounded-4 bg-none border-0 overflow-hidden hover-show">
|
|
<img src="{% static 'img/ai/imagine-6.jpg' %}" class="card-img" alt="Generated Image" />
|
|
<div class="card-img-overlay d-none hover-show-elm h-100 bg-gradient-to-t bg-gradient-from-black bg-gradient-to-transparent">
|
|
<div class="h-100 d-flex align-items-end">
|
|
<div class="w-100">
|
|
<h5 class="card-title text-truncate">Futuristic half-robot tiger in nature</h5>
|
|
<div class="d-flex">
|
|
<a href="#" class="text-decoration-none text-body me-3"><i class="fa fa-fw fa-pen opacity-50"></i> Edit</a>
|
|
<a href="#" class="text-decoration-none text-body"><i class="fa fa-fw fa-repeat opacity-50"></i> Variation</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-3">
|
|
<div class="card rounded-4 bg-none border-0 overflow-hidden hover-show">
|
|
<img src="{% static 'img/ai/imagine-7.jpg' %}" class="card-img" alt="Generated Image" />
|
|
<div class="card-img-overlay d-none hover-show-elm h-100 bg-gradient-to-t bg-gradient-from-black bg-gradient-to-transparent">
|
|
<div class="h-100 d-flex align-items-end">
|
|
<div class="w-100">
|
|
<h5 class="card-title text-truncate">Psychedelic girl illustration</h5>
|
|
<div class="d-flex">
|
|
<a href="#" class="text-decoration-none text-body me-3"><i class="fa fa-fw fa-pen opacity-50"></i> Edit</a>
|
|
<a href="#" class="text-decoration-none text-body"><i class="fa fa-fw fa-repeat opacity-50"></i> Variation</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-3">
|
|
<div class="card rounded-4 bg-none border-0 overflow-hidden hover-show">
|
|
<img src="{% static 'img/ai/imagine-8.jpg' %}" class="card-img" alt="Generated Image" />
|
|
<div class="card-img-overlay d-none hover-show-elm h-100 bg-gradient-to-t bg-gradient-from-black bg-gradient-to-transparent">
|
|
<div class="h-100 d-flex align-items-end">
|
|
<div class="w-100">
|
|
<h5 class="card-title text-truncate">View of airplane flying through a fantasy world</h5>
|
|
<div class="d-flex">
|
|
<a href="#" class="text-decoration-none text-body me-3"><i class="fa fa-fw fa-pen opacity-50"></i> Edit</a>
|
|
<a href="#" class="text-decoration-none text-body"><i class="fa fa-fw fa-repeat opacity-50"></i> Variation</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-3">
|
|
<div class="card rounded-4 bg-none border-0 overflow-hidden hover-show">
|
|
<img src="{% static 'img/ai/imagine-9.jpg' %}" class="card-img" alt="Generated Image" />
|
|
<div class="card-img-overlay d-none hover-show-elm h-100 bg-gradient-to-t bg-gradient-from-black bg-gradient-to-transparent">
|
|
<div class="h-100 d-flex align-items-end">
|
|
<div class="w-100">
|
|
<h5 class="card-title text-truncate">Fantasy style clouds with animal</h5>
|
|
<div class="d-flex">
|
|
<a href="#" class="text-decoration-none text-body me-3"><i class="fa fa-fw fa-pen opacity-50"></i> Edit</a>
|
|
<a href="#" class="text-decoration-none text-body"><i class="fa fa-fw fa-repeat opacity-50"></i> Variation</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-3">
|
|
<div class="card rounded-4 bg-none border-0 overflow-hidden hover-show">
|
|
<img src="{% static 'img/ai/imagine-10.jpg' %}" class="card-img" alt="Generated Image" />
|
|
<div class="card-img-overlay d-none hover-show-elm h-100 bg-gradient-to-t bg-gradient-from-black bg-gradient-to-transparent">
|
|
<div class="h-100 d-flex align-items-end">
|
|
<div class="w-100">
|
|
<h5 class="card-title text-truncate">Psychedelic girl illustration</h5>
|
|
<div class="d-flex">
|
|
<a href="#" class="text-decoration-none text-body me-3"><i class="fa fa-fw fa-pen opacity-50"></i> Edit</a>
|
|
<a href="#" class="text-decoration-none text-body"><i class="fa fa-fw fa-repeat opacity-50"></i> Variation</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-3">
|
|
<div class="card rounded-4 bg-none border-0 overflow-hidden hover-show">
|
|
<img src="{% static 'img/ai/imagine-11.jpg' %}" class="card-img" alt="Generated Image" />
|
|
<div class="card-img-overlay d-none hover-show-elm h-100 bg-gradient-to-t bg-gradient-from-black bg-gradient-to-transparent">
|
|
<div class="h-100 d-flex align-items-end">
|
|
<div class="w-100">
|
|
<h5 class="card-title text-truncate">Fantasy bird illustration</h5>
|
|
<div class="d-flex">
|
|
<a href="#" class="text-decoration-none text-body me-3"><i class="fa fa-fw fa-pen opacity-50"></i> Edit</a>
|
|
<a href="#" class="text-decoration-none text-body"><i class="fa fa-fw fa-repeat opacity-50"></i> Variation</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-3">
|
|
<div class="card rounded-4 bg-none border-0 overflow-hidden hover-show">
|
|
<img src="{% static 'img/ai/imagine-12.jpg' %}" class="card-img" alt="Generated Image" />
|
|
<div class="card-img-overlay d-none hover-show-elm h-100 bg-gradient-to-t bg-gradient-from-black bg-gradient-to-transparent">
|
|
<div class="h-100 d-flex align-items-end">
|
|
<div class="w-100">
|
|
<h5 class="card-title text-truncate">Vibrant colored autumn trees on fiery backdrop generated by AI</h5>
|
|
<div class="d-flex">
|
|
<a href="#" class="text-decoration-none text-body me-3"><i class="fa fa-fw fa-pen opacity-50"></i> Edit</a>
|
|
<a href="#" class="text-decoration-none text-body"><i class="fa fa-fw fa-repeat opacity-50"></i> Variation</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-3">
|
|
<div class="card rounded-4 bg-none border-0 overflow-hidden hover-show">
|
|
<img src="{% static 'img/ai/imagine-13.jpg' %}" class="card-img" alt="Generated Image" />
|
|
<div class="card-img-overlay d-none hover-show-elm h-100 bg-gradient-to-t bg-gradient-from-black bg-gradient-to-transparent">
|
|
<div class="h-100 d-flex align-items-end">
|
|
<div class="w-100">
|
|
<h5 class="card-title text-truncate">View of rhinoceros animal with futuristic robotic parts</h5>
|
|
<div class="d-flex">
|
|
<a href="#" class="text-decoration-none text-body me-3"><i class="fa fa-fw fa-pen opacity-50"></i> Edit</a>
|
|
<a href="#" class="text-decoration-none text-body"><i class="fa fa-fw fa-repeat opacity-50"></i> Variation</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-3">
|
|
<div class="card rounded-4 bg-none border-0 overflow-hidden hover-show">
|
|
<img src="{% static 'img/ai/imagine-14.jpg' %}" class="card-img" alt="Generated Image" />
|
|
<div class="card-img-overlay d-none hover-show-elm h-100 bg-gradient-to-t bg-gradient-from-black bg-gradient-to-transparent">
|
|
<div class="h-100 d-flex align-items-end">
|
|
<div class="w-100">
|
|
<h5 class="card-title text-truncate">Robot and human silhouettes</h5>
|
|
<div class="d-flex">
|
|
<a href="#" class="text-decoration-none text-body me-3"><i class="fa fa-fw fa-pen opacity-50"></i> Edit</a>
|
|
<a href="#" class="text-decoration-none text-body"><i class="fa fa-fw fa-repeat opacity-50"></i> Variation</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-3">
|
|
<div class="card rounded-4 bg-none border-0 overflow-hidden hover-show">
|
|
<img src="{% static 'img/ai/imagine-15.jpg' %}" class="card-img" alt="Generated Image" />
|
|
<div class="card-img-overlay d-none hover-show-elm h-100 bg-gradient-to-t bg-gradient-from-black bg-gradient-to-transparent">
|
|
<div class="h-100 d-flex align-items-end">
|
|
<div class="w-100">
|
|
<h5 class="card-title text-truncate">Neon hologram of tiger</h5>
|
|
<div class="d-flex">
|
|
<a href="#" class="text-decoration-none text-body me-3"><i class="fa fa-fw fa-pen opacity-50"></i> Edit</a>
|
|
<a href="#" class="text-decoration-none text-body"><i class="fa fa-fw fa-repeat opacity-50"></i> Variation</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-3">
|
|
<div class="card rounded-4 bg-none border-0 overflow-hidden hover-show">
|
|
<img src="{% static 'img/ai/imagine-16.jpg' %}" class="card-img" alt="Generated Image" />
|
|
<div class="card-img-overlay d-none hover-show-elm h-100 bg-gradient-to-t bg-gradient-from-black bg-gradient-to-transparent">
|
|
<div class="h-100 d-flex align-items-end">
|
|
<div class="w-100">
|
|
<h5 class="card-title text-truncate">Fantasy house on the moon illustration</h5>
|
|
<div class="d-flex">
|
|
<a href="#" class="text-decoration-none text-body me-3"><i class="fa fa-fw fa-pen opacity-50"></i> Edit</a>
|
|
<a href="#" class="text-decoration-none text-body"><i class="fa fa-fw fa-repeat opacity-50"></i> Variation</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-3">
|
|
<div class="card rounded-4 bg-none border-0 overflow-hidden hover-show">
|
|
<img src="{% static 'img/ai/imagine-17.jpg' %}" class="card-img" alt="Generated Image" />
|
|
<div class="card-img-overlay d-none hover-show-elm h-100 bg-gradient-to-t bg-gradient-from-black bg-gradient-to-transparent">
|
|
<div class="h-100 d-flex align-items-end">
|
|
<div class="w-100">
|
|
<h5 class="card-title text-truncate">People hanging out with robot</h5>
|
|
<div class="d-flex">
|
|
<a href="#" class="text-decoration-none text-body me-3"><i class="fa fa-fw fa-pen opacity-50"></i> Edit</a>
|
|
<a href="#" class="text-decoration-none text-body"><i class="fa fa-fw fa-repeat opacity-50"></i> Variation</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-3">
|
|
<div class="card rounded-4 bg-none border-0 overflow-hidden hover-show">
|
|
<img src="{% static 'img/ai/imagine-18.jpg' %}" class="card-img" alt="Generated Image" />
|
|
<div class="card-img-overlay d-none hover-show-elm h-100 bg-gradient-to-t bg-gradient-from-black bg-gradient-to-transparent">
|
|
<div class="h-100 d-flex align-items-end">
|
|
<div class="w-100">
|
|
<h5 class="card-title text-truncate">Off-road car in fantasy scenario</h5>
|
|
<div class="d-flex">
|
|
<a href="#" class="text-decoration-none text-body me-3"><i class="fa fa-fw fa-pen opacity-50"></i> Edit</a>
|
|
<a href="#" class="text-decoration-none text-body"><i class="fa fa-fw fa-repeat opacity-50"></i> Variation</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-3">
|
|
<div class="card rounded-4 bg-none border-0 overflow-hidden hover-show">
|
|
<img src="{% static 'img/ai/imagine-19.jpg' %}" class="card-img" alt="Generated Image" />
|
|
<div class="card-img-overlay d-none hover-show-elm h-100 bg-gradient-to-t bg-gradient-from-black bg-gradient-to-transparent">
|
|
<div class="h-100 d-flex align-items-end">
|
|
<div class="w-100">
|
|
<h5 class="card-title text-truncate">Cyberpunk city street at night with neon lights and futuristic aesthetic</h5>
|
|
<div class="d-flex">
|
|
<a href="#" class="text-decoration-none text-body me-3"><i class="fa fa-fw fa-pen opacity-50"></i> Edit</a>
|
|
<a href="#" class="text-decoration-none text-body"><i class="fa fa-fw fa-repeat opacity-50"></i> Variation</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-3">
|
|
<div class="card rounded-4 bg-none border-0 overflow-hidden hover-show">
|
|
<img src="{% static 'img/ai/imagine-20.jpg' %}" class="card-img" alt="Generated Image" />
|
|
<div class="card-img-overlay d-none hover-show-elm h-100 bg-gradient-to-t bg-gradient-from-black bg-gradient-to-transparent">
|
|
<div class="h-100 d-flex align-items-end">
|
|
<div class="w-100">
|
|
<h5 class="card-title text-truncate">Cartoon ai robot scene</h5>
|
|
<div class="d-flex">
|
|
<a href="#" class="text-decoration-none text-body me-3"><i class="fa fa-fw fa-pen opacity-50"></i> Edit</a>
|
|
<a href="#" class="text-decoration-none text-body"><i class="fa fa-fw fa-repeat opacity-50"></i> Variation</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-3">
|
|
<div class="card rounded-4 bg-none border-0 overflow-hidden hover-show">
|
|
<img src="{% static 'img/ai/imagine-21.jpg' %}" class="card-img" alt="Generated Image" />
|
|
<div class="card-img-overlay d-none hover-show-elm h-100 bg-gradient-to-t bg-gradient-from-black bg-gradient-to-transparent">
|
|
<div class="h-100 d-flex align-items-end">
|
|
<div class="w-100">
|
|
<h5 class="card-title text-truncate">Blockchain technology cartoon illustration</h5>
|
|
<div class="d-flex">
|
|
<a href="#" class="text-decoration-none text-body me-3"><i class="fa fa-fw fa-pen opacity-50"></i> Edit</a>
|
|
<a href="#" class="text-decoration-none text-body"><i class="fa fa-fw fa-repeat opacity-50"></i> Variation</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-3">
|
|
<div class="card rounded-4 bg-none border-0 overflow-hidden hover-show">
|
|
<img src="{% static 'img/ai/imagine-22.jpg' %}" class="card-img" alt="Generated Image" />
|
|
<div class="card-img-overlay d-none hover-show-elm h-100 bg-gradient-to-t bg-gradient-from-black bg-gradient-to-transparent">
|
|
<div class="h-100 d-flex align-items-end">
|
|
<div class="w-100">
|
|
<h5 class="card-title text-truncate">Cartoon ai robot scene</h5>
|
|
<div class="d-flex">
|
|
<a href="#" class="text-decoration-none text-body me-3"><i class="fa fa-fw fa-pen opacity-50"></i> Edit</a>
|
|
<a href="#" class="text-decoration-none text-body"><i class="fa fa-fw fa-repeat opacity-50"></i> Variation</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-md-3">
|
|
<div class="card rounded-4 bg-none border-0 overflow-hidden hover-show">
|
|
<img src="{% static 'img/ai/imagine-23.jpg' %}" class="card-img" alt="Generated Image" />
|
|
<div class="card-img-overlay d-none hover-show-elm h-100 bg-gradient-to-t bg-gradient-from-black bg-gradient-to-transparent">
|
|
<div class="h-100 d-flex align-items-end">
|
|
<div class="w-100">
|
|
<h5 class="card-title text-truncate">Cartoon ai robot scene</h5>
|
|
<div class="d-flex">
|
|
<a href="#" class="text-decoration-none text-body me-3"><i class="fa fa-fw fa-pen opacity-50"></i> Edit</a>
|
|
<a href="#" class="text-decoration-none text-body"><i class="fa fa-fw fa-repeat opacity-50"></i> Variation</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END ai-imagine -->
|
|
{% endblock %} |